路由基本传值
传:
this.$router.push('/path地址?参数名=参数值&参数2=值2')
this.$router.push({
path:'/path地址',
query:{
参数名:值
}
})
收
this.$route.query.参数名
动态路由匹配
配制路由
{
path:'/xxx/:参数名?' ?代表参数值可传可不传
}
传:
this.$router.push('/xxx/值')
收:
this.$route.params.参数名===值
name传参
配制路由
{
path,
component,
name:'abc'
}
传
this.$router.push({
name:'abc',
query:{
参数名:参数值
}
})
this.$router.push({
name:'abc',
params:{
参数名:参数值
}
})
这种传值方式它不会在url体现,它的值存储在内存中,刷新就没了,优点:不受长度与数据类型影响(类似post传值)
接:this.$route.query.参数名
this.$route.params.参数名
全局路由勾子
- beforeEach:前置守卫
- beforeResolve:解析勾子
- afterEach:已进入相应路由时执行
路由所对应组件勾子
- beforeRouteEnter:进入前
- beforeRouteUpdate:更新前
- beforeRouteLeave:路由离开前
beforeRouteEnter:进入前:在beforeCreate之前执行,不能使用this
beforeRouteEnter((to,from,next)=>{
next((vm)=>{
vm:当前组件的实例对象
})
})
beforeRouteUpdate:更新前,路由更新了,路由所对应组件不变时执行
注意:它是更新前,如果获取当前路由,它是更新前的路由信息,如果要
获取更新后的使用this.$nextTick(()=>{获取更新后的})
beforeRouteLeave:路由离开前
路由配制所对应勾子
beforeEnter:读取路由配制时执行
执行先后
beforeEach===>beforeEnter===>beforeRouteEnter===>beforeResolve===>afterEach
更新时执行先后
beforeEach===>beforeRouteUpdate===>afterEach
beforeDestroy执行时间节点:
A路由跳转到B路由时它们A组件与B组件执行的生命周期勾子
beforeCreate(B)===>created(B)===>beforeMount(B)===>beforeDestroy(A)===>
destroyed(A)===>mounted(B)
父组件与子组件生命周期执行先后
beforeCreate(父)===>created(父)===>beforeMount(父)===>beforeCreate(子)===>
created(子)===>beforeMount(子)===>mounted(子)===>mounted(父)