这是我参与「第五届青训营 」伴学笔记创作活动的第 29 天

Vue Router是Vue的官方路由，可以通过管理映射到不同组件的路由们来构建单页应用。

创建

使用数组来存储路由对象，这些对象一般包含path、component（映射的组件）等属性，然后使用createRouter创建router实例之后，将其挂载到应用上app.use(router)。

在挂在到应用上之后可以使用this.router来访问router实列，还可以使用this.route来访问当前的路由。

动态路由

可以在path中提前设置为参数的部分，并通过实例来访问参数。

const routes = [
	{
		path: '/params/:params'
	}
]

<template>
<p>{{ $route.params }}</p>
</template>

参数保存的是url中匹配params之后/`分割的一部分。

匹配语法

正则表达式

可以在path的表达式的最后方添加一个括号，里面的内容的正则规则，这样就可以使匹配更加灵活。

const routes = [
	{
		path: '/:/number(//d+)'
		// 此时number保存的将会是整个url中的数字部分
	}
]

匹配多个部分

如果想要匹配url的多个部分，可以在匹配字符串的最后面（如果有正则，正则在它的前面）添加+（匹配一个或者多个由/分割的部分）或者*（0个或者多个）。这样得到的params将会是一个数组。

可选参数

可以在最后（和上文一样其实是在参数后面）添加?来将这个参数标记为可选的，此时这个字符穿匹配到的值可以是包含这个参数的部分，也可以是不包含的。

sensitive

在路由对象中添加这个属性并设置值为true，此时匹配将会严格按照表达式的大小写和结尾有无/。

嵌套

可以在定义路由时增加children属性，值为数组里面是属于它的子路由对象，在子路由匹配成功之后，它将会被渲染在父路由的<router-view>中。

Nuxt

Nuxt3的路由就是使用的Vue Router，只不过不需要再自己写router这些东西，框架会完成这些工作。