Nuxt3第二篇【路由】

路由篇

静态路由

在nuxt中页面都是放在pages文件夹下，它会根据文件名自动生成路由

取名为index.vue表明默认显示页面

根目录创建pages文件夹—》在目录下创建一个index.vue

1
2
3

在app.vue中放置路由出口

NuxtWelcome为nuxt提供的欢迎页标签

NuxtPage可以理解为路由出口标签，相当于router-link

1
2
3
4
5
6
7
8

这样项目运行就可以看到index.vue内容了~

为了验证路由是根据文件名去创建的，在pages继续创建文件list.vue

1
2
3

浏览器访问:http://localhost:3000/list

即可访问到list文件的内容…

动态路由

上方已经了解路由是如何自动生成的了,现在学习一下可以传参的路径(动态路由)

大概结构如下

pages/
	/pengke-[num1]/
		/[num2].vue
1
2
3

获取参数

{{$route.params.num1}}
{{$route.params.num2}}
1
2

大概就是这个概念…

在[num2].vue下编写

1
2
3
4
5
6

这里需要用到路由跳转,方便测试

该标签用于路由跳转，相当与router-link 也是通过to属性

在首页中编写

传值去pengke页
1

或者手动地址栏输入:localhost:3000/pengke-20/666

即可看到页面中显示传来的值…这都是通过nuxt一系列自动化实现的

嵌套路由

通过实现

创建文件夹parent并且在文件夹下创建child.vue文件

1
2
3

在parent文件夹同级目录下创建个文件名相同的文件parent.vue

1
2
3
4
5
6

大致结构如下:

地址栏访问:http://localhost:3000/parent/child

即可看到parent.vue的内容与child的内容一同展示

在parent文件夹下创建index.vue当访问/parent时默认会展示index.vue的内容

看完"路由"这篇文章你基本会使用了~✌