添加路由

Question

我的应用中有很多文章，在 Vue Router 中 URL 是这样写的：/article/:id。

我想要“固定”特定文章并提供更简单的 URL。例如：/pinned-article，它应该指向 /article/3274 和 /other-pinned-article，指向 /article/68173。

我想把它添加到我的路线中，但它不起作用：

{ path: '/article/3274', component: Article, alias: '/pinned-article' }

我想到了别的东西，涉及另一个组件：

{ path: '/pinned-article/:id', component: PinnedArticle }

组件 PinnedArticle 在 router.alias 部分使用类似 <script> 的命令默默地为正确的文章添加别名，但它显然不存在。

有没有办法解决这个问题？我想我可以使用我在 Stackvoverflow 中读到的一些答案（例如，将 /me 重定向到 /user/:id，但它不适用。提前致谢:)

Answer 1

添加路由

您可以使用 Dynamic Routing 实现这一点，这与动态路由匹配不同，即路由参数。

^{（此解决方案适用于 Vue 3 和 Vue 2，Vue Router >= 3.5.0）}

通过使用Vue router的addRoute方法，可以在运行时创建路由。您可以使用 redirect 或不使用，具体取决于您希望网址栏显示 /article/3274 还是 /pinned。

重定向

如果您希望网址从 /pinned 更改为 /article/3274，请使用 redirect：

methods: {
  pinRoute() {
    this.$router.addRoute({
      path: '/pinned',
      name: 'pinned',
      redirect: { name: 'article', params: { id: 3274 }}
    })
  }
}

访问路线如下：

this.$router.push('/pinned')

^{上面的例子假设你给你的文章路由一个 name: 'article' 属性，这样你就可以重定向到它}

别名

您可以使用 /pinned 将 URL 保留为 alias。通常，别名会出现在现有的 Article 路由定义上，但这不适用于路由参数。您可以对新路由使用“反向别名”：

methods: {
  pinRoute() {
    this.$router.addRoute({
      path: '/params/3274',
      name: 'pinned',
      alias: '/pinned',
      component: () => import('@/views/Article.vue')  // Article component path
    })
  }
}

访问路线如下：

this.$router.push('/pinned')

注意事项：

您可能希望将 id 参数传递给 pinRoute 方法，而不是像上面的示例那样对其进行硬编码。
使用上述任一方法的 addRoute 的一个好处是，如果路由已经存在，例如，从您上次调用该方法开始，它就会被覆盖。因此，您可以根据需要多次使用该方法来不断更改 /pinned 的目的地。（Vue 2 和 Vue 3 中的文档都说路由定义将被覆盖，尽管 Vue 2 路由器会抛出重复路由警告。）
当然，固定路由不会在应用刷新之间自动保留，因此您需要保存/加载固定 ID（即使用 localStorage 等）并运行这些方法之一如果需要，在应用加载时

VueJS 路由器别名到特定参数

1 个答案:

添加路由

重定向

别名