路由配置

官方配置

普通路由

文件夹里index.vue, .js, .jsx, .ts or .tsx 都可以默认为路由的第一个页面，如果文件夹里有其他的名字的文件，则逐层映射，例如：

/pages/index.vue -------> /
/pages/detail/index.vue -------> /detail
/pages/testPage/test.vue -------> /testPage/test

动态路由

这个效果实现还是比较简单，比如官网给的例子：

[]里面是要定义的路由变量，可以在页面里接收到变量的值，所有的变量都会映射到路由的fullPath

路由嵌套

这里需要在pages写一个页面的入口parent，如果里面有同名的文件夹，那么自动去匹配里面的页面child.vue，作为他的子路由。

自定义路由

如果之前项目采用的vue-router那些配置，能不能直接导入到nuxt3呢？答案是否定的，目前只支持pages里面创建页面，然后框架去解析的编译的模式去定义，这一点希望正式版本能有一个支持的方法。

路由守卫

官方示例：在middleware新建routerMonitor.global.js，注意这里必须带.global后缀，这样才能应用到全局，如果不设置，默认到组件才能调用

组件内调用

// 路径
- | middleware/
- -| routerMonitor.js
- 

// 组件内
<script setup>
definePageMeta({
  middleware: ["routerMonitor"]
})
</script>

路由守卫设置

navigateTo('/')或navigateTo({ path: '/' })- 重定向到给定路径
abortNavigation()- 停止当前导航
abortNavigation(error)- 拒绝当前导航并出现错误

这里给出了三个内部的api，这里并不会阻塞进程，不需要使用next()方法

export default defineNuxtRouteMiddleware((to, from) => {
    console.log(to)
     if(to.fullPath === '/infors'){ // 重定向
        return  navigateTo('/applyCode')
     }
     if(to.fullPath === '/login'){  // 停止当前导航
        return  abortNavigation()
     }
     if(to.fullPath === '/comePay/comePay'){ // 拒绝当前导航并出现错误
        return  abortNavigation('禁止进入页面')
     }
  })

Nuxt3体验和实战（四）- 路由和守卫