Skip to content

路由补充知识

路由分组

Nuxt 默认会根据 pages 下的目录结构自动生成路由,如果是子目录下的文件,那么就会生成二级路由。例如:

pages/
├── user/
│ ├── user1.vue
│ ├── user2.vue

此时生成的路由就是 /user/user1 以及 /user/user2.

但是有时我们单纯的希望给路由分个组,而不改变路由层级,此时就可以将分组的名称用小括号括起来。例如:

-| pages/
---| index.vue
---| (分组名)/
-----| about.vue
-----| contact.vue

这里的 about.vue 以及 contact.vue 所生成的路由仍然是根路由。

另外,动态路由也是能够分组的,例如:

-| pages/
---| index.vue
---| users-[group]/
-----| [id].vue

可以使用 /users-admins/123 导航到动态路由组件,并且可以在子组件中获取到分组的名称。

<template>
<p>{{ $route.params.group }} - {{ $route.params.id }}</p>
</template>

最终会渲染:

<p>admins - 123</p>

路由验证

Nuxt 通过每个要验证的页面中的 definePageMeta() 的 validate 属性提供路由验证。

validate 属性接受 route 作为参数,可以返回一个布尔值来确定是否将此路由视为有效路由以渲染此页面。如果返回 false,并且找不到其他匹配项,这将导致 404 错误。

例如:

definePageMeta({
// 验证路由
validate: async (route) => {
// ...
},
})

编程式导航

在使用 Vue-router 的时候,我们经常会用到编程式导航。例如:

router.push({ path: '/home' })
router.replace({ path: '/home' })

在 Nuxt 中,提供了 navigateTo 方法进行编程式导航,具体的使用方法可以参阅 这里


-EOF-