vue-router 学习笔记
安装
npm install vue-router --save起步
Javascript:
import vue from 'vue';
import vueRouter from 'vue-router';
vue.use(vueRouter);
var routes=new vueRouter({
routes:[
{
path:'/aaa',
name:'bbb',
component:xxxx
},
{
path:'/aaa/:id/:name',
name:'bbb',
component:xxxx
},
{
path:'/aaa/:id/:name',
name:'bbb',
component:xxxx,
children:[
path:'post',
component:xxx,
props:bool/{}/route=>{} //布尔模式，对象模式，函数模式
]
},
]
})HTML
动态匹配路由
#配置方法
new vueRouter({
routes:[
// 动态路径参数使用 ：标记。
{path:'/user/:id',name:'user',component:user}
]
})一个参数路径用：冒号标记。当匹配到一个路由时，参数会被设置到this.$route.params中。
#响应路由参数的变化
当使用路由参数时，例如从 /user/foo 导航到 /user/bar 时，原来的组件实例会被复用。因为两个路由都渲染同个组件，比如销毁再创建，复用显得更有效率。不过，这也意味着组件的生命周期钩子不会再被调用。
这个时候想对路由参数的变化做出相应，可以简单地使用watch(检测变化) $route 对象或者使用 beforeRouteUpdate()导航守卫
//watch
const user={
template:``,
watch:{
$route(to,from)=>{
...
}
}
}
//beforeRouterUpdate()
const user={
template:``,
beforeRouteUpdate(to,from,next){
}
}#高级匹配模式
https://github.com/pillarjs/path-to-regexp#parameters
#匹配优先级
有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。
嵌套路由
new vueRouter({
routes:[
{
path:'/user',
name:'user',
component:user,
children:[
{
path:'foo', //要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
component:foo,
props:bool/Object/(route)=>{}
},
//此时，基于上面的配置，当你访问 /user/foo 时，User 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。
//如果你想要渲染点什么，可以提供一个 空的 子路由：
{
path:'',
component:bar
}
]
}
]
})
const user={
template:`
编程式导航
# this.$router.push(location,onComplete?,onAbort?)
this.$router.push('home')
this.$router.push({name:'home',param:{},query:{}})
this.$router.push({path:'/home',query:{}})注意：如果提供了 path，params 会被忽略.同样的规则也适用于 router-link 组件的 to 属性。
在 2.2.0+，可选的在 router.push 或 router.replace 中提供 onComplete 和 onAbort 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。
# this.$router.replace(location,onComplete?,onAbort?)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录
# this.$router.go(n)
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步
命名视图
new vueRouter({
routes:[
{
path:'/user',
name:'user',
components:{
default:foo,
helper:bar
}
}
]
})
重定向
new vueRouter({
routes:[
{path:'/user/:id',name:'user',component:user,redirect:'/foo'}
//{path:'/user/:id',name:'user',component:user,redirect:{name:'foo'}}
//{path:'/user/:id',name:'user',component:user,redirect:to=>{
const {query,params}=to;
return {name:'foo',query,params}
}}
]
})注意导航守卫并没有应用在跳转路由上，而仅仅应用在其目标上。
别名
new vueRouter({
routes:[
{path:'/user',name:'user',component:user,alias:'/foo'},
{path:'/foo',name:'foo',component:foo},
]
})alias的值可以为字符串，当有多个别名时，可以用数组
别名的意思是比如上例，/user的别名是 /foo，当用户访问 /foo 时，url会保持 /foo，但是路由匹配则为/user，就像用户访问 /user一样
路由组件传参
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。
使用 props 将组件和路由解耦。
#布尔模式
props属性设置为(全等于) true的时候，route.params 将会被设置为组件属性。
new vueRouter({
routes:[
{path:'/user/:id',name:'user',component:user,props:true}
]
})#对象模式
new vueRouter({
routes:[
{path:'/user/:id',name:'user',component:user,props:[a:1,b:2]}
]
})#函数模式
new vueRouter({
routes:[
{path:'/user/:id',name:'user',component:user,props:route=>{
return {a:1,b:2,id:route.params.id}
}}
]
})导航守卫
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
注意：参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。
#全局守卫 beforeEach
/**
*@description:
*@param route to 即将要进入的目标路由对象
*@param route from 导航正要离开的路由
*@param next() 进行管道中的下一个钩子。
*@param next(false):中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，
*那么 URL 地址会重置到 from 路由对应的地址。
*@param next('/')、next({path:'/'}):跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导
*航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任
*何用在 router-link 的 to prop 或 router.push 中的选项。
*@param next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被
*传递给 router.onError() 注册过的回调。
/
router.beforeEach((to,from,next)=>{
next();
})
#全局解析守卫 beforeResolve
router.beforeResolve((to,from,next)=>{
next()
})你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
#全局后置钩子 afterEach
这个钩子不会接受 next 函数也不会改变导航本身：
router.afterEach((to,from)=>{
})#路由独享的守卫 beforeEnter
new vueRouter({
routes:[
{
path:'/user',
name:'user',
component:user,
beforeEnter(to,from,next){
}
}
]
})#组件内的守卫
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}beforeRouteEnter不能访问组件实例this,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。但是可以传一个回调给next来访问组件。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。
#完整的导航解析流程
- 导航被触发。
- 在失活的组件里调用离开守卫。
- 调用全局的
beforeEach守卫。 - 在重用的组件里调用
beforeRouteUpdate守卫 (2.2+)。 - 在路由配置里调用
beforeEnter。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter。 - 调用全局的
beforeResolve守卫 (2.5+)。 - 导航被确认。
- 调用全局的
afterEach钩子。 - 触发 DOM 更新。
- 用创建好的实例调用
beforeRouteEnter守卫中传给next的回调函数。