Vue.js 动态路由器链路

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

我的问题是：如何使

路由器链接

s与动态内容一起工作

目前，我只能用编辑器添加classic

。当内容呈现时，它是一个经典链接，因此当访问者单击该链接时，整个网站都会重新加载以显示目标链接的内容

我认为我正在寻找的行为是将内部链接转换为

路由器链接

，将外部链接转换为经典链接

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

谢谢你的建议或想法

如果您想了解我所谈论的内容，我会在一个小的JSFiddle中解释我的问题：

const Home={
模板：“主页”，
数据（）{
返回{
dynamicContent:'这是一个动态链接，并且'
}
}
}

---

将只渲染经典链接

好的，现在我可以看到您想要实现的内容

显然，将

呈现为静态HTML将不起作用

您需要直接在模板中生成

。您可以使用以获得更大的灵活性/活力，或者如Vue文档所述：

充分利用JavaScript的编程能力

然后将

绑定到

参数，并将链接内容绑定到某个动态变量，例如从

数据

属性

例1。使用“简单动态”字符串模板：

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

我没有检查第二个示例是否有有效的语法，但您已经了解了如何使用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演示了问题的解决方法：

可能是一种黑客行为，但我通过添加onclick属性来解决这个问题，强制路由器选择链接并防止页面重新加载：

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

上面写着

请注意，

上不支持

target=“\u blank”

因此，如果需要在新选项卡中打开链接，则必须使用

{{name}}

您是否尝试过在

路由器链接中使用
v-for
？另请阅读“我不明白”。所有
路由器链接
参数和标签内容都可以是动态的。你不能用它实现的用户故事是什么？我对我的问题做了一个处理：仍然不够
重新加载整个网站以显示目标链接的内容
。。。你能说除了这个你还期待什么吗？
<dynamic-vue-component :content="dynamic"></dynamic-vue-component>

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

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