动态路由器链接答案

【问题标题】：Dynamic router-link动态路由器链接
【发布时间】：2018-05-11 20:12:15
【问题描述】：

我用 VueJS 和 VueRouter 开发了某种博客。所以我在管理部门有一个降价编辑器来添加博客文章。

我的问题是：如何让router-links 处理动态内容？

暂时只能用编辑器添加经典的<a href="...">foo</a>。当内容被渲染时，它是一个经典链接，所以当访问者点击链接时，整个网站都会重新加载以显示目标链接的内容。

我认为我正在寻找的行为是将内部链接转换为router-link，将外部链接转换为经典链接。

您在项目中实现这一目标的策略是什么？有人遇到过这个问题吗？

感谢您的建议或想法。

如果你想看看我在说什么，我在一个小的 JSFiddle 中解释了我的问题：http://jsfiddle.net/El_Matella/museptre/1/

const Home = { 
  template: '<div>Home <div v-html="dynamicContent"></div></div>',
  data () {
    return {
        dynamicContent: '<router-link to="/foo">This is a dynamic link</router-link> and <a href="https://google.com" target="_blank">and this is a classic link</a>'
    }
  }
}

只会渲染经典链接

【问题讨论】：

你试过在router-link 中使用v-for 吗？
另请阅读router.vuejs.org/en/advanced/lazy-loading.html
我不明白。所有router-link 参数和标签内容都可以是动态的。什么是你无法实现的用户故事？
我为我的问题做了一个 JSFiddle：jsfiddle.net/El_Matella/museptre
还是不够。 the entire website gets reloaded to display the content of the targeted link ... 你能说除此之外你还期待什么吗？

标签： vue.js vue-router

【解决方案1】：

好的，现在我可以看到你想要实现的目标了。

显然，将<router-link></router-link> 渲染为静态 HTML 是行不通的。

需要直接在模板中生成<rotuer-link>。你可以使用render method 来获得更多的灵活性/活力，或者正如 Vue 文档所说：

充分利用 JavaScript 的编程能力。

然后您将to 参数和链接内容绑定到某个动态变量，例如。来自data道具。

示例 1. 带有“简单动态”的字符串模板：

const Home = { 
  template: '<div>Home <router-link :to="dynamicTo">{{dynamicContent}}</router-link></div>',
  data () {
    return {
        dynamicContent: 'This is a dynamic link',
        dynamicTo: '/foo'
    }
  }
}

示例 2. 使用“更复杂的动态”和渲染方法：

 render: function(createElement) {
    createElement(
      'router-link', {
        props: {
          to: this.dynamicTo
        }
      }, this.dynamicContent)
}

我没有检查第二个示例的语法是否有效，但您已经知道如何使用 JavaScript 生成完全可定制的模板（您可以使用循环、变量等）。

可以创建自定义组件解决问题并使用渲染功能：

export default {
    props: {
    content: {
        type: String,
      required: true
    }
  },
  render (h) {
    return h(Vue.compile(this.content))
  }
}

并以这种方式使用它：

<dynamic-vue-component :content="dynamic"></dynamic-vue-component>

这里有一个 JSFiddle 演示了问题的解决：JSFiddle

【讨论】：

【解决方案2】：

也许是一种 hack，但我设法通过添加一个 onclick 属性来解决这个问题，强制路由器选择链接并阻止页面重新加载：

 <a href="/the-link/" target="_self" onclick="event.preventDefault(); 
 app._router.push('/the-link/');">Some text.</a>

【讨论】：

有点hack，但router-link 不适用于v-html，这是唯一的解决方案。 +1！