动态路由匹配
动态路径参数，以:开头
{path:"user/:id",component: User} 可以通过$route.params获取参数
动态参数改变，但路由是相同的页面不会重新渲染，生命周期里的方法不会重新调用
可以监听当前路由信息
watch:{
$route(to,from){
}
}
或者通过导航守卫beforeRouteUpdate(to,from,next)
{path:"*"}匹配所有路由，通常用于404页面
linkActiveClass 全局配置激活的样式
嵌套子路由
routes:[
{
path:"/user/:id",
component: User,
children:[path:"info",component:Info] // 以/为开头的嵌套路径，会被当为根路径，所以子路由不用/开头
}
]
在子组件里写上<router-view />子路由会渲染在里面
当路由为/user/18不会渲染任何东西，可以添加空字符串的子路由，会默认渲染
{path:"",component: defaultCom}
编程式导航
$router.push({
path: ""
params: {} // 当提供path时，该属性会被忽略
query:{}
name:"" // 路由名称
})
$rouer.replace() $rouer.go()
命名路由
给路由提供name属性，后续可以通过name来跳转
<router-link :to="{name:'user'}"
命名视图
同一路由渲染多个<router-view/>
重定向和别名
重定向 redirect {path:"/",redirect:"/home"}
别名 alias {path:"/a",alias:"/b"} /a /b 都可以访问到
路由组件传参
设置props:true,会被设置为组件属性
{path:"user/:id",component:User,props:true}
组件内props:["id"]
命名视图内 props:{ default: true,comname:false } 分开设置
对象模式 props:{ attrname: value } 同样在组件里props:["attrname"]就可以访问到
函数模式，参数为当前路由，可以把路由信息返回 (route)=>({ query:route.query })
导航守卫
全局前置导航 router.beforeEach(to,from,next)
全局后置钩子 router.afterEach(to,from) 不能中止导航，可以做一些完成导航之后的事情
路由独享的导航 beforeEnter(to,from,next) 配置在路由里
{
path:"/user", beforeEnter(to,form,next)
}
组件内的守卫 beforeRouteEnter beforeRouteLeave beforeRouteUpdate
路由元信息
在定义路由时配置meta字段
{
path:"",meta:{ requiresAuth: true }
}
可以在$route.matched中访问到,可以在全局路由前置守卫中访问拦截，比如部分页面需要登录
滚动行为 只有浏览器默认的后退可以触发
scrollBehavior(to,from,savePositon){
return { selector:"",behavior:"smooth",x:0,y:0 }
<router-link>
作用域插槽 v-slot
<router-link replace push变成replace
tag 变换dom
active-class 单独设置高亮的样式
exact全匹配时候才会高亮
event声明用来触发的事件
exact-active-class 全部匹配时高亮的样式
mode
base
linkExactActiveClass
router.mode router.app 挂载的应用实例 router.currentRoute router.START_LOCATION 路由的初始地址
router.push router.go router.replace router.forward router.back
router.addRoute()
router.getRoutes 返回所有活跃的路由列表
router.onReady
router.onError(callback) 可以通过全局前置守卫的next(Error)触发
