来自服务器数据的Vue2路由器链接

Question

我有一个Vue2 SPA页面,它从服务器加载内容.它可以由CMS中的客户端编辑.

当用户添加相对链接(比如说/ about-us)时,应该由Vue选择并将其视为菜单链接(已经/ about-us链接).

但是,在内容中添加的链接到/ about-us正在重新加载整个页面,因此它不会被选为vue路由.

如何将路由器连接到这样的链接？

到目前为止我所做的是改变后端响应中的内容.

所以我本质上在改变

<a href="/about-us">Text</a>

成

<router-link :to="{ path: '/about-us'}">Text</router-link>

使用:

function parseVueLinks($value)
{
    $pattern = "/<a([^>]*) href=\\\"[^http|https|mailto|tel]([^\\\"]*)\"([^>]*)>(.*?)<(\\/a>)/";
    $replace = "<router-link$1 :to=\"{ path: '$2'}\">$4</router-link>";

    return preg_replace($pattern, $replace, $value);
}

仍然没有运气.

这怎么可能？

Answer 1

如果我正确理解您的问题，则不是链接解析，这看起来不错。您想编译生成的HTML，以便Vue路由器可以启动。有一个函数Vue.compile可以帮助您：

Vue.component('my-component', {
  template: '<div></div>',
  props: {
    html: String
  },
  mounted() {
    let { render, staticRenderFns } = Vue.compile(this.html);
    new Vue({ el: this.$el, render, staticRenderFns, router })
  }
});

使用该组件，您可以使用prop指定任何HTML html，然后将在mounted事件中对其进行编译并替换组件模板。请注意，router被传递给new Vue()，这是对Vue路由器的引用，这是必需的，以便<router-link>可以解析HTML中的所有标签。

现在，您可以使用此组件来像这样编译HTML：

<my-component :html="content"></my-component>

在哪里var content = parseVueLinks('<a href="/about-us">Text</a>')。

您可以在这里查看工作示例https://codepen.io/anon/pen/BmmjwV