JSON数据中的Vue v-links答案

【问题标题】：Vue v-links in JSON dataJSON数据中的Vue v-links
【发布时间】：2016-10-05 10:04:19
【问题描述】：

我对 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 数据中的链接？

【问题讨论】：

查看这个问题：github.com/vuejs/vue-router/issues/48
谢谢，这很有帮助。不知道我是怎么错过的。我在实施它时遇到了麻烦......它去哪儿了？此外，似乎 $compile 是它发生的原因。 $compile 可以在父元素上运行吗？无论如何，我无法让它工作。

标签： javascript jquery json vue.js vue-router

【解决方案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');

【讨论】：

【解决方案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);
    } 
});

【讨论】：