Question

我对Vue比较陌生，所以如果这很明显（或者显然是不可能的话），请原谅我。

我有一组JSON数据（通过vue-resource从RESTful API获取）：

{content: "This is content. <a href='/blog'> Link to blog </a>"}

现在，该链接会触发页面重新加载。如果它是vue-router v-link，那就不是问题了。但是，这不起作用（当然，引号在数据中被转义）：

{content: "This is content. <a v-link="{ path: '/blog' }"> Link to blog </a>"}

此时，模板已经被解析，Vue将不再创建v-link（它只会在渲染的html中显示为v-link）。

我的最终结果理想上意味着我可以在我的CMS中包含HTML或Vue格式的链接，并让Vue将它们正确地作为v-links路由。

我能做些什么来让Vue解释JSON数据中的链接吗？

Answer 1

我已经在Vue Chat上回答了问题，并将其写在此处，以防任何其他人遇到类似问题

Codepen

上的简化示例

HTML

<div id="app">
  <div>
    <a v-link= "{path:'/home'}">Go to home</a>
  </div>
  <router-view></router-view>
</div>
<template id="home">
  <div>
    <div>
      Fetched Content:
    </div>
    <div>
      {{{ fetchedContent }}}
    </div>
  </div>
</template>
<template id="route1">
  <div>
    Route1 view
  </div>
</template>
<template id="route2">
  <div>
    Route2 view, this is different from Route1
  </div>
</template>

的javascript

function getContent (callback) {
  var content = 'Click this: <a href="/route1">Go to route1</a> and <a href="/route2">Go to route2</a>'
  setTimeout(function () { callback(content) }, 1000)
}
var Home = Vue.component('home',{
  template:'#home',
  data: function () {
    return {
      fetchedContent: 'Loading...'
    };
  },
  ready: function () {
    var self = this
    var router = this.$router

    getContent( function (result) {
      self.fetchedContent = result;
      Vue.nextTick(function () {
        var hyperLinks = self.$el.getElementsByTagName('a')
        Array.prototype.forEach.call(hyperLinks, function (a) {
          a.onclick = function (e) { 
            e.preventDefault()
            router.go({ path: a.getAttribute("href") })
          }
        })
      })
    })
  }
});
var Route1 = Vue.component('route1', {
  template: '#route1'
});
var Route2 = Vue.component('route2', {
  template: "#route2"
});
var router = new VueRouter({
    hashbang:false,
    history:true
});
router.map({
    '/home':{
      component:Home
    },
    '/route1':{
      component:Route1
    },
    '/route2':{
      component:Route2
    }
});
router.start({
}, '#app');

Answer 2

我在这里有一个类似的解决方案：question在我的JSON代码中使用自定义数据集和单击侦听器进行处理：

mounted() {
window.addEventListener('click', event => {
    let target = event.target
    if (target && target.href && target.dataset.url) {
        event.preventDefault();
        console.log(target.dataset.url);
       const url = JSON.parse(target.dataset.url);
        console.log(url.name)
       this.$router.push(url.name);
    } 
});

}，

Jue数据中的Vue v-links

2 个答案: