在根目录创建pages文件夹,里面创建index.vue和about.vue文件
直接在地址来修正途径,在虎爷地址后面添加文件名进行访问,创造页面没有变革
缘故原由是须要去掉根目录下面的app.vue文件才可以 或者在app.vue文件中添加一个入口
xml
代码解读
复制代码
<script setup></script> <template> <header>头部</header> <main> <router-view></router-view> </main> <footer>尾部</footer> </template> <style scoped lang="scss"> header, footer, main { border: 1px solid #ccc; } </style>
index.vue的路由便是一个/，也便是主页
页面入口我们可以直策应用router-view标签，也可以利用nuxt中的NuxtPage，一样平常是利用NuxtPage，NuxtPage功能是router-view一样，但是更强大，支持命名路由和可选路由
在vue中利用router-link进行跳转页面，在nuxt中利用NuxtLink
切换页面的时候是在客户端进行渲染的，刷新之后才是在做事端渲染
命名路由命名路由是根据名字进行创建路由
在pages下面创建一个user文件夹，然后创建一个文件，文件名是[名称].vue
类似于vue中的动态路由/user/:名称
访问地址和vue中一样http://localhost:3000/user/aa
个中aa可以是任意字符，叫做命名路由的参数，一样平常情形是id，不能为空
xml
代码解读
复制代码
<script setup lang="ts"> // 获取通报的参数 const route = useRoute(); console.log("route", route.params.aa); </script> <template> <div>路由</div> </template> <style lang="scss"></style>
在vue中定义动态路由：
css
代码解读
复制代码
{ path:"/user/:id", component: () => import("../user/userInfo.vue"), }
表示当访问 项目主页+/user/参数是访问的是userInfo.vue文件
在nuxt中不须要在创建路由表，须要动态路由的时候，直接创建一个[id].vue就可以了，访问办法和vue一样，访问的文件便是创建的这个文件
可选路由在pages文件加下面创建[[test]]文件夹，在文件夹下面创建test.vue文件
访问地址是localhost:3000/aaa/test
aaa是任意字符，可以去掉，获取办法和命名路由一样test是创建的文件类似于vue中的动态路由，例如:
css
代码解读
复制代码
{ path:"/user/:id/info", component: () => import("../user/userInfo.vue"), }
相称于是将vue的动态路由拆成了命名路由和可选路由
问题：如果创建一个动态路由+可选路由，是否就没有404页面了？
答案：不会的，当层级多了还是会涌现404页面，例如只创建了一层可选路由和动态路由，那么localhost:3000/api/test/aaa不知足所有的路由就会走404,也便是后面的全局路由
全局路由nuxt中定了一个全局路由，在/pages根目录下麦呢创建一个[...名称].vue文件，当所有的路由都没有匹配到的时候就会走到全局路由
相称于vue中的404路由
自定义路由默认情形下是通过文件名形成路由，也可以通过definePageMeta自行设置路由名
xml
代码解读
复制代码
<script setup lang="ts"> definePageMeta({ path:"/about1" }) </script> <template> <div>about</div> </template> <style lang="scss"> </style>
嵌套路由如果须要创建路由嵌套，那么须要再/pages文件夹下面创建info.vue和info文件夹，然后在info文件夹下面创建多个文件
arduino
代码解读
复制代码
pages ├── about.vue # http://localhost:3000/about ├── index.vue # http://localhost:3000/ ├── info │ ├── aa.vue # http://localhost:3000/info/aa │ ├── index.vue # http://localhost:3000/info/ │ └── one.vue # http://localhost:3000/info/one ├── info.vue # http://localhost:3000/info ├── [[bb]] │ └── [ccc].vue # http://localhost:3000/随意字符或者空/随意字符 如果有能匹配到的就不实行这个 ├── user │ └── [aa].vue # http://localhost:3000/user/随意字符 ├── [...500].vue # 所有路由没有匹配时 └── [[test]] └── test.vue # http://localhost:3000/随意字符或者空/user
在实行子路由的时候，也会实行副路由里面的代码
编程式navigateTo在vue中编程式路由是：
php
代码解读
复制代码
const router = useRouter() router.push({ path: '/about' })
router.push只能在客户端利用navigateTo在客户端和做事端都能利用xml
代码解读
复制代码
<!-- \pages\index.vue --> <script setup lang="ts"> if (import.meta.server) { const router = useRouter(); // router.push("/user/aa"); navigateTo('/user/aa') } </script> <template> <div> 首页 </div> </template>
实行这个文件会跳转到主页，并不会跳转到/user/aa
将router.push换成navigateTo只要一实行就会跳转
navigateTo不会阻挡后面代码实行，如果有打印会在做事端进行打印，客户端不会打印，由于页面已经跳转了，客户端不会在连续渲染
路由中间件在vue中是通过beforeEach定义导航守卫，在nuxt中是利用中间件的形式存在
中间件值定义在middleware文件夹中
在根目录创建middleware文件夹，在文件夹下面创建my.js
javascript
代码解读
复制代码
export default defineNuxtRouteMiddleware((to, from) => { console.log(" ~ defineNuxtRouteMiddleware ~ to:", to.path) })
在须要利用的页面进行引入
xml
代码解读
复制代码
<!-- \pages\index.vue --> <script setup lang="ts"> definePageMeta({ middleware: [ // 可以存在多个 'my' ] }); </script> <template> <div>首页</div> </template>
在利用多个中间件的时候，实行顺序是从上往下
如果在中间件中须要跳转页面，在利用navigateTo前面须要添加return，在添加return的时候，如果想要后面的中间件实行，须要return true
也可以直接在页面中定义中间件
xml
代码解读
复制代码
<!-- \pages\index.vue --> <script setup lang="ts"> definePageMeta({ middleware: [ // 中间件 function (to, form) { console.log(" ~ to:", to); } ] }); </script> <template> <div>首页</div> </template>
如果想要定义全局的中间件那么文件名必须是名称.global.js，定义内容是一样的，不须要在单独引入，全局中间件也可以定义多个，顺序是文件名的 ascii码排序
导航守卫导航守卫写在全局中间件中，在导航守卫中一样平常须要判断本地是否存在token，而token是存在于客户真个localStorage中，但是在做事端是不存在localStorage的，因此在利用之前须要先判断是否是客户端，只有是客户真个时候才会实行
在书写的时候须要把稳是编写的代码是否存在于做事端
在页面中须要一开始实行的代码，如果不须要做事端渲染，须要写在onMounted中
原文链接：https://juejin.cn/post/7419218775163224091
