vue-router如何忽略路由参数去匹配理由规则?

发布于 2022-09-12 04:00:35 字数 812 浏览 11 评论 0

现在有一个需求,就是页面刷新的时候,我需要判断当前url是否在路由规则(集合)里面?如果存在,就定位到当前路由,否则跳转到首页。

假设当前路由为:/xxx/yyy/100

定义的路由里面有:/xxx/yyy/:id

刷新页面时,我需要使用/xxx/yyy/100匹配到/xxx/yyy/:id,这个时候我如何能够方便的忽略路由参数来比较呢?

自己方法如下:

let currentRoute = this.$route
let currentRoutePath = currentRoute.path.toLowerCase()
if(currentRoute.params) {
  for (const key in currentRoute.params) {
    if (currentRoute.params.hasOwnProperty(key)) {
      const element = currentRoute.params[key];
      currentRoutePath = currentRoutePath.replace(element, `:${key}`)
    }
  }
}

也就是把现有路由(赋值后)转成路由规则(赋值前),如:

当前路由
/xxx/yyy/ccc8a6d0-3e86-465e-a255-4bf4e3735b79
转成成
/xxx/yyy/:id

然后进行匹配,不知道时候有问题(还未经过长时间验证)。

有更好的方法吗?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

妄想挽回 2022-09-19 04:00:35

你可以直接在路由文件中,最后写上通配符*,捕获所有路由或 404 Not found 路由,路由匹配不到就会走这个通配路由,直接定位到首页不久可以了吗?

const HomeComponent = () => import('xxx')
{
    path: '*',
    component: HomeComponent
}
少女情怀诗 2022-09-19 04:00:35

没看错的话,你想要的是this.$route里的matched, 包含当前路由的所有嵌套路径片段的路由记录。
当前路由
/world/123/bar
可以匹配到的路由
image.png

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文