Question

我用VueJS和VueRouter开发了一些博客。所以我在管理中有一个降价编辑器，以便添加博客帖子。

我的问题是：如何让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 method来获得更多灵活性/动态，或者像Vue文档所说：

利用JavaScript的全部程序功能。

然后你将to param和链接的内容绑定到一些动态var例如。来自data prop。

示例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

Answer 2

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

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

Answer 3

documentation说...

请注意，target="_blank"不支持<router-link>，

因此，如果您需要在新标签页中打开链接，则必须改用<a>。

，因此我编写了一个工作模板，该模板使用v-if和v-else：

<li v-for="{ path, name, target } in links" :key="path">
    <div v-if="target === '_blank'" :value="_blank">
        <a v-if="target" :value="_blank" :href="path" :target="target">
            {{ name }}
        </a>
    </div>
    <router-link v-else :to="path">
        {{ name }}
    </router-link>
</li>

动态路由器链接

3 个答案: