学习nuxt笔记五-命名路由,可选路由,全局路由,自定义路由

188 阅读1分钟

学习视频:www.bilibili.com/video/BV11W…

命名路由

定义:使用一个名称来命名路由

新建文件

image.png

浏览器显示

image.png

网址里面的id11叫做参数 当我们输入网址http://localhost:3000/user/id11 的时候会显示我们新建的[id]页面 只要输入http://localhost:3000/user/?? ??可是时任何数据,字符串等。

可以通过下面代码来获取路由参数

const route=useRoute()
console.log(route.params.id);

问题一 如果我在user目录下再新建一个命名路由文件 输出http://localhost:3000/user/?? 会显示哪个页面呢

解答 路由有优先级。Nuxt 会根据文件名的具体性来决定路由的优先级。更具体的路由会优先匹配。例如,如果有 user/[id].vue 和 user/[id2].vue,当访问 http://localhost:3000/user/123 时,[id].vue  会被优先匹配,因为它是更通用的动态路由。如果有多个动态路由,Nuxt 会选择第一个匹配的路由。

可选路由

新建目录,页面

image.png

页面显示

image.png

image.png

image.png

总结: url可以是http://localhost:3000/test/testEdit, 因为是可选路由中间的test可以省略 http://localhost:3000/testEdit。 但是后面的testEdit为文件名,不可以写别的,写别的会报错

全局路由

image.png

image.png

别的页面匹配不上时,会显示这个页面。

自定义路由

不是通过文件名称定义路由名称 而是在vue代码里面定义路由名称

image.png

image.png

image.png