（Nuxt的Vue-router）如何区分以“/”结尾和不以“/”结尾的路径

Question

使用 nuxt 路由器的 extendRoutes 属性，我试图区分以斜线结尾的路径和不以斜线结尾的路径。这是由于我们使用的 CMS 处理路径的方式。

我可以通过将概览页面区分为以/all或/overview结尾的路径来区分它们，但这并不理想。

我的页面目录中有一个 _slug.vue

（应匹配 /articles/some-article-1)

而且我有一个带有嵌套类别的文章概述的路径。

（应匹配 /articles/ /articles/category/ 和 /articles/category/category-of-category/）

这似乎有效，

            routes.unshift({
                name: 'articles',
                path: '/articles/:category([^/]*/)',
                component: resolve(__dirname, 'pages/-overview.vue')
            })

但引发错误：

预期“类别”匹配“[^/]*/”，但收到“dfdf%2F

如何正确匹配以斜线结尾的路径？

Answer 1

你试过吗？

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      name: 'articles',
      path: '/articles/:category',
      strict: true,
      component: resolve(__dirname, 'pages/-overview.vue')
    },
   
   ...
  ]
})

// or, for all routes
const router = createRouter({
  history: createWebHistory(),
  routes: [
    ...
  ],
  strict: true
})

https://router.vuejs.org/guide/essentials/route-matching-syntax.html#sensitive-and-strict-route-options

（Nuxt的Vue-router）如何区分以“/”结尾和不以“/”结尾的路径

( Nuxt's Vue-router ) How to differentiate path ending with "/" and without

vue.js

vue-router

nuxt.js