如何将提及标签文本转换为 <router-link> ？ (VUEJS)

Question

我在 data 中有一个 body 属性

data(){
 return{
  body:'Hello im @username1 and @username2'
 }
}

我想将每个@user 转换为下面的代码，用户可以在其中单击该链接以转到该 url 路径。

<router-link :to="`/${username1}`">@{{username1}}</router-link>

我尝试了什么

<span v-html='bodyReplaced'>
  computed: {
    bodyReplaced(){
      return this.body.replace(
        /@\w+/g, 
        (user) => '<router-link :to="`/${username1}`">@{{username1}}</router-link>'
      )
    }
  }

代码做了什么：

1. 将字符串转换为dom中的router-link而不是视图中
2. 我不知道如何在匹配后替换 @，所以我可以在 to="`/${username1} 中使用它

Answer 1

创建一个名为 mention 的组件并将用户名作为 prop 传递，我使用了与 @Bergi 相同的方法，或者您可以替换一个计算属性，在其中将提及 uder 替换为可以解析的 a 元素不像路由器链接：

Vue.component('mention', {
  template: `<router-link :to="'/'+user">@{{user}}</router-link>`,
  props: ['user']
})
const Foo = {
  template: '<div>im foo</div>'
}
const Bar = {
  template: '<div>im bar</div>'
}
const routes = [{
    path: '/foo',
    component: Foo
  },
  {
    path: '/bar',
    component: Bar
  }
]

const router = new VueRouter({
  routes, // short for `routes: routes`,

})

// 4. Create and mount the root instance.
// Make sure to inject the router with the router option to make the
// whole app router-aware.
const app = new Vue({
  router,
  data() {
    return {
      body: 'Hello im @foo and @bar'
    }
  },

  computed: {
    tokens() {
      return this.body.split(' ');
    },
    bodyReplaced() {
      return this.body.split(' ').map(w => {
        return w.startsWith('@') ? `<a href="#/${w.slice(1)}">${w}</a>` : w;
      }).join(' ')
    }
  }
}).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <div>********The first solution********</div>

  <template v-for="token in tokens">
    
     <mention v-if="token.startsWith('@')" :user="token.slice(1)"></mention>
     <template v-else>&nbsp;{{token}}&nbsp;</template>
  </template>
  <div>********The second solution********</div>
  <span v-html='bodyReplaced'></span>
  <router-view></router-view>
</div>

Answer 2

我认为您正在寻找类似的东西

<template v-for="part of body.split(/(@\w+)/g)">
  <router-link v-if="part[0] == '@'" :to="`/${part.slice(1)}`">{{part}}</router-link>
  <template v-else>{{part}}</template>
</template>

new Vue({
  el: 'main',
  data: {
    body:'Hello im @username1 and @username2'
  },
  router: new VueRouter({
    routes: []
  }),
})

<main>
  <template v-for="part of body.split(/(@\w+)/g)">
    <router-link v-if="part[0] == '@'" :to="`/${part.slice(1)}`">{{part}}</router-link>
    <template v-else>{{part}}</template>
  </template>
</main>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>