前言
在上一篇文章Vue-Router入门(一) :初识路由中我们对于路由有了初步的一些了解。其中提到了如何创建路由实例,讲解了路由的一些配置,也提到了每个路由会有一个对应的组件。但是一个组件不一定只对应一个路由,如何用一个组件去对应多个路由,本节就来介绍一下动态路由。
动态路由是什么
我们写的最多的路由路由比如/about
是静态路由,
js
{
path: "/about",
name: "about",
component: () => import("../views/AboutView.vue"),
},
与之对应的还有动态路由,动态就意味着路由中有可变的部分。这个部分由参数表示,该参数称之为路径参数。
为什么会有动态路由呢?假设我们有一个users
页面,该页面的数据根据id会展示不同的数据,我们需要把它放到url上获取,这时候路由的uid是动态的,如果我们用静态路由,每个uid都需要对应一个路由:
js
path: '/users/1'
path: '/users/2'
...
因为路由只能对应一个组件,这么做肯定不现实,于是就有了动态路由,我们把动态部分uid变成一个参数,只要前面路径一样的路由就展示同一个组件,不管这uid有多少个,我们就写一个路由就可以。动态路由的语法为:
makefile
路由/:动态参数
上面的edit我们就可以用动态路由:
js
{
path: '/users/:id',
component: User
},
注意路径参数前面的冒号一定不能丢,而路径参数我们可以通过params去获取,关于路由传参我们后续会专门讲解。
我们在/users
加上路径参数,让它变成动态路由。
js
{
path: '/users/:id',
name: 'users',
component: () => import('@/components/Users.vue')
}
路径参数可以有多个,都是冒号跟参数名称,并且这些参数都会放到params里面。动态路由对应着同一个组件,为了提交性能,此时组件是复用 ,这也就意味着当路径参数变化时,生命周期不会被调用。
匹配语法
动态路由之所以能够对应同一个组件,也是有具体的匹配语法,提到匹配我们首先想到的肯定就是正则表达式,利用正则表达式让我们匹配到的路由范围更加广阔。比如给uid增加一个类型与长度的判断:
js
path: '/users/:uid(\d{2,4})'
uid必须为数字并且长度为2-4,如果我们打开/users/1
不符合匹配条件,页面就是空白。
Sensitive 与 strict 路由配置
默认情况下,所有路由是不区分大小写的,并且能匹配带有或不带有尾部斜线的路由。例如,路由 /users
将匹配 /users
、/users/
、甚至 /Users/
。这种行为可以通过 strict
和 sensitive
选项来修改,它们既可以应用在整个全局路由上,又可以应用于当前路由上:
js
const router = createRouter({
history: createWebHistory(),
routes: [
// 将匹配 /users/posva 而非:
// - /users/posva/ 当 strict: true
// - /Users/posva 当 sensitive: true
{ path: '/users/:id', sensitive: true },
// 将匹配 /users, /Users, 以及 /users/42 而非 /users/ 或 /users/42/
{ path: '/users/:id?' },
],
strict: true,
})