Question

我有一个Vuejs应用程序，我允许用户注册并成为会员。我添加了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

双胡须将数据解释为纯文本，而不是HTML。在为了输出真实的HTML，您需要使用v-html指令DOC

<p v-html="content" />

修改

为了使router-link工作，你需要使用一个返回组件选项对象的computed属性：

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

然后渲染它：

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

最终结果：

＆＃13;

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>`
      }
    }
  }
})

＆＃13;

<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>

＆＃13;

Answer 2

您无法使用router-link插入动态内容（即需要编译的内容，例如v-html），它仅适用于常规html。我建议采用另一种方法，即将router-link放在模板中，但使用v-if开关将其隐藏，这样只有在切换开关后才能呈现和显示。

模板

<span v-if="displayRouter">
  please click <router-link to="/profile"> here </router-link> to see your profile
</span>

JS

Registration() {
  if(true) {
    this.displayRouter = true
    ...

一般来说，我认为将所有html 保留在 html中更清晰，而不是在JS中。

Answer 3

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

您可以使用<a>代码。

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

3 个答案: