javascript - 无法在链接内插入 vue-router 标签

Question

我有一个 Vuejs 应用程序，允许用户注册并成为成员(member)。 我添加了vuex存储与流程成功/失败相关的消息。

目前，一切正常，除非我尝试在变量中存储并显示 [vue-router] 链接，如下所示:

...
Registration() {
  if(true) {
    this.$store.commit('SET_MESSAGE', {
     type: 'success',
     title: 'Registration Success',
     content: 'please click <router-link to="/profile"> here </router-link> to see your profile'
  }
}

现在，我可以检索所有属性并显示它们，但是 <router-link to="/profile"> here </router-link>标签没有按预期进行转换(或发挥作用)。

这就是我显示它的方式。

 <div class="alert alert-dismissible" :class="'alert-' +type"  >
 <h1> {{tilte}} </h1> 
 <p> {{content}} </p>
</div>

我尝试过 <p v-bind:html='content'></p>和{{{ content }}}在这两种情况下该路线都不起作用

Answer 1

The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the v-html directive DOC

<p v-html="content" />

编辑

为了使路由器链接正常工作，您需要使用返回组件选项对象的计算属性:

computed: {
  contentComp () {
    return { template: `<p>${this.content}</p>` }
  }
}

然后渲染它:

<component :is="contentComp"></component>

最终结果:

const profile = {
  template: '<div> profile page! </div>'
}

const router = new VueRouter({
  routes: [{
    path: '/profile',
    component: profile
  }]
})

new Vue({
  router,
  el: '#app',
  data: {
    title: 'Registration Success',
    content: 'please click <router-link to="/profile"> here </router-link> to see your profile'
  },
  computed: {
    contentComp() {
      return {
        template: `<p>${this.content}</p>`
      }
    }
  }
})

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <div>
    <h1> {{title}} </h1>
    <component :is="contentComp"></component>
  </div>
  <router-view></router-view>
</div>