动态路由器链接

Question

我使用VueJS和VueRouter开发了某种博客。因此，在管理部门中我有一个markdown编辑器，以便添加博客文章。

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

目前，我只能<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>'
    }
  }
}

只会呈现经典链接

Answer 1

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

显然，呈现<router-link></router-link>为静态HTML无效。

您需要<rotuer-link>直接在模板中生成。您可以使用render方法来获得更大的灵活性/动态性，或者如Vue docs所述：

利用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方法：

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

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

可以创建一个自定义组件来解决问题并使用render函数：

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

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

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