路由基本使用
1:安装 yarn add vue-router
2:导入
src/router/index.js
import VueRouter from 'vue-router'
3:注册
import Vue from 'vue'
Vue.use(VueRouter)
4:实例化
const router=new VueRouter({
routes:[
{
path:'/',
components:{
default:组件, router-view name='default'
其它名字:组件 router-view name='其它名字'
},
alias:别名(/home)
meta:路由元
redirect:重定向,
children....
}
]
})
5:暴露出去 export default router
6:挂载
import router from '@/router'
new Vue({
router
})
7:路由出口
router-view
路由传值
1.基本传值
传:
this.$router.push('/path地址?参数名=参数值&参数2=值2')
this.$router.push({
path:'/path地址',
query:{
参数名:值
、。。。
}
})
收
this.$route.query.参数名
2.动态路由传值
配制路由
{
path:'/xxx/:参数名?' ?代表参数值可传可不传
}
传:
this.$router.push('/xxx/值')
收:
this.$route.params.参数名===值
3.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:进入前,在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(父)