动态路由器-link

Question

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

我的问题是：如何使 router-links 使用动态内容？

暂时只能跟小编加经典<a href="...">foo</a>。当内容呈现时，它是经典 link，因此当访问者单击 link 时，整个网站将重新加载以显示目标 link 的内容。

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

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

感谢您的建议或想法。

如果你想看看我在说什么，我在一个小的 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>'
    }
  }
}

只会渲染经典link

Answer 1

好的，现在我知道你想要实现什么了。

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

您需要直接在模板中生成<rotuer-link>。您可以使用 render method 获得更多 flexibility/dynamism 或如 Vue 文档所述：

leverage the full programmatic power of JavaScript.

然后您将 to 参数和 link 的内容绑定到某个动态变量，例如。来自 data prop.

示例 1. 使用 "simple dynamism" 字符串模板：

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

示例 2. 使用 "more complex dynamism" 和渲染方法：

 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

Answer 2

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

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

动态路由器-link

Dynamic router-link

vue.js

vue-router