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

Posted 2023-02-22

【中文标题】来自服务器数据的 Vue2 路由器链接

【英文标题】：Vue2 Router link from server data

【发布时间】：2018-04-22 07:25:19

【问题描述】：

我有一个 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);

仍然没有运气。

这怎么可能？

【问题讨论】：

Vue components / elements in v-html的可能重复

【参考方案1】：

我认为您的替换正则表达式很好，但缺少一个 /。 确实，经过测试，我看到了解析的结果：

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

输出：

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

而不是正确的：

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

（请参阅 about-us 而不是 /about-us）

你可以试试这个吗？

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

【讨论】：

仍然没有区别。 <a

【参考方案2】：

最简单的正则表达式模式是/<a href="([^>]*)">(.+)<\/a>/。

测试示例：

console.clear() 

const parseVueLinks = ($value) => 
  const re = /<a href="([^>]*)">(.+)<\/a>/g;
  const matches = re.exec($value);
  return `<router-link :to=" path: '$matches[1]'">$matches[2]</router-link>`


console.log(parseVueLinks('<a href="/about-us">Text</a>'))
console.log(parseVueLinks('<a href="http://google.com">Goooooogle</a>'))

我不知道 php，但我猜可能是等效的 PHP（在 https://www.functions-online.com/preg_match.html 测试）：

function parseVueLinks($value)

  $pattern = "/<a href="([^>]*)">(.+)<\/a>/";
  $matches = [];
  preg_match($pattern, $replace, $matches);
  return "<router-link :to=\" path: '" + $matches[1] + "'\">" + $matches[2] + "</router-link>"; 

我想知道您的正则表达式中是否存在http|https|mailto|tel，这是否意味着您想对链接进行一些验证？

如果是这样，使用preg_match() 允许在输出之前对$matches[1] 执行第二个正则表达式步骤。作为第二步进行验证似乎比使用一个大的正则表达式更简单。

---

编辑以下评论

问题不在正则表达式中。它在 Vue 中没有解析从服务器提取的内容

如果您使用的是服务器端渲染，这可能不适用，但这是我应用内容链接的方式。

MyComponent.ts

<template>
  <div class="row">
    ...
      <router-link :to="'/' + measure.link" class="measure">
        <i class="measure-icon fa fa-lg" :class="measure.icon" aria-hidden="true">
          <span class="title">measure.title</span>
        </i>
      </router-link>

这里，measure 是从服务器获取的对象。我您正在获取完整的<router-link>，它可能与Dynamic Component 一起使用，但它似乎有点矫枉过正，因为您知道该元素将是<router-link。

注意，如果服务器对点击响应404也有问题，您可以使用哈希模式路由（默认），在链接前添加#，例如#/about-us。

或者，在 Vue 路由器中设置历史模式。

const router = new Router(
  routes,
  mode: 'history'
)

这需要服务器重定向到 index.html 以获得 404。请参阅 HTML History Mode。

此外，您还需要在 Vue 中使用包罗万象的路线处理 404，

const routes = [
  ...
   path: '*', component: NotFoundComponent ,
]

【讨论】：

问题不在正则表达式中。它在 Vue 中不解析从服务器中提取的内容。它必须解析我的数据并将<router-link 更改为<a 标签。 http|https|mailto|tel 可以跳过不会成为路由器链接的链接。

好的，抱歉。我假设因为 preg_replace 在您的示例中，所以它在服务器上运行。

这个问题可能对你有用Vue.js replace hashtags in text with <router-link>。我明天再进一步看看。 （还要注意那里引用的CodePen。

还有一点，如果问题是阻止页面重新加载，请参阅HTML5 History Mode。

【参考方案3】：

如果我对您的理解正确，您的问题不在于链接解析，这看起来不错。您想编译生成的 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 )
  
);

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

现在您可以使用这个组件来编译您的 HTML，如下所示：

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

var content = parseVueLinks('<a href="/about-us">Text</a>').

你可以在这里看到一个工作示例https://codepen.io/anon/pen/BmmjwV

【讨论】：

这正是我所需要的。谢谢！

不错的一个！这很有帮助。