2021-08-14 VueRouter基础

动态路由匹配

在使用路由的时候，经常需要用到路由参数，$router,param，这样就可以在不影响组件的情况下换参数访问

响应路由参数变化
如果路由参数发生变化，原来的组件实例会被复用，所以组件的生命周期不会被再次调用，如果想要路由参数变化的时候响应的话，就使用watch监听 $router对象的变化

const User = {
	template: '...',
	watch: {
		$router(to, from) {
			//对路由变化做出响应
		}
	}
}

捕获所有路由或者访问404 Not Found路由
如果想匹配任何路径，可以使用通配符*，比如
path: /user-*
就可以匹配以user-开头的所有路径，通配符通常使用在路径最后，当使用通配符的时候，$router.params就会添加一个名为pathMatch的参数
比如:
/user-admin
$router.params.pathMatch //admin
高级匹配模式
可以使用正则去匹配一个或者多个
匹配优先级

嵌套路由

每一个router-view都是一个渲染组件的出口，使用children嵌套路由就可以实现组件切换，如果路由中的路径使用/的话，会被当作根路径。

编程式导航

this.$router.push()方法可以访问路由实例，这个方法会向history栈添加一条历史记录。就相当于使用了router.push()
该方法可以传入字符串，对象，命名的路由，还可以携带参数

在2.2.0版本后，可以在router.push或者router.replace中提供onComplete和onAbort回调作为第二个和第三个参数，这些回调将在所有异步钩子被解析后或者导航到相同的路由、或者在完成当前导航之前导航到另一个路由的时候进行相应的调用。在3.1.0版本后可以省略第二个，第三个参数，如果支持Promise的话，router.push和router.replace会返回一个Promise

如果router.push的路由目的路由和当前路由相同，只有参数变化了，就需要使用beforeRouterUpdate来响应这个变化

router.go(n)
这个方法类似于window.history.go()，意为向前或者向后退浏览器记录

命名路由

在routes配置的时候可以给写上name属性，这样可以直接在router.push({ name: ‘’ })来调用路由

命名视图

有时候需要多个视图在同一个路由展示，在配置routes的时候，在components里面写多个组件，并且有一个默认的组件

在router.view里面指定组件名称就可以显示多个视图了

嵌套命名视图

和嵌套路由一样，写在children里面

重定向

可以通过routes配置从/a重定向到/b

routes: [
	{
		path: '/a',
		redirect: '/b'
	}
]

也可以重定向一个方法，参数是目标路由。

别名

访问/b的时候会显示/a路由下的内容

路由组件传参

如果路由中需要使用包含视图的路由，必须为每个命名视图添加prop选项，可以让组件便于测试和复用