目录
一、路由基础
路由机制
1.声明路由对象数组
2.创建路由器实例对象
3.将路由器实例注册vue根实例
4.通过router-link标签访问组件
5.路由导航守卫
二、动态路由匹配
响应路由参数的变化/监听路由url地址栏参数变化?
通过路由加载组件的方式,主要处理单页面应用程序。
// 声明路由对象数组 对象存放一个组件路由信息 通过路由映射组件
const routes = [
{
path: '/',
// 重定向
// redirect: { name: 'MyA' }
// redirect:'/myB'
},
{
// 路由路径
path: '/myA',
// 路由映射组件
component: myA,
// 给路由设置名称
name: 'MyA',
// 给路由设置别名
alias: '/aa'
},
{
path: '/myB',
component: myB,
// 路由独享守卫 进入该路由时候触发
// beforeEnter(to, from, next){
// console.log(to,from);
// if(from.path!='/myA'){
// next(false)
// }else{
// next()
// }
// }
},
{
path: '/user/:id/:username',
component: myUser
}
];
const router = new VueRouter({
routes:routes,
路由模式
mode:''
});
// 创建路由器对象 将路由对象数组挂载到路由器对象中
const router = new VueRouter({
routes,
// 路由模式
mode: 'hash'
});
new Vue({
router
})
路由出口匹配
去A组件 |
去B组件 |
去A组件
用户组件
beforeRouteEnter()路由改变进入组件的时候触发---进入该路由对应的组件
beforeRouteUpdate()该组件被复用时候触发---更新该路由对应的组件
beforeRouteLeave()离开路由对应组件时候触发--离开该路由对应的组件
// 路由改变进入组件的时候触发---进入该路由对应的组件
beforeRouteEnter(to, from, next) {
console.log(this, to, from, next, 'beforeRouteEnter', 'this指向window全局对象');
next();
},
// 路由改变 该组件被复用时候触发---更新该路由对应的组件
beforeRouteUpdate(to, from, next) {
console.log(this, to, from, next, 'beforeRouteUpdate');
next();
},
// 路由改变 离开路由对应组件时候触发--离开该路由对应的组件
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
console.log(this,to,from,'beforeRouteLeave')
next();
}
不同用户加载同一个组件,通过动态路径参数实现动态路由匹配。
1.watch 监听路由对象,to即将进入的路由有params对象可以获取到最新的路由参数
2.beforeRouteUpdate 使用组件内的导航守卫beforeRouteUpdate监听到路由参数变化,即将进入路由to对象中params属性中可以获取到最新的参数
注意:使用created钩子获取路由对象参数只能获取到最初进入组件内路由的参数
{
// 动态路径参数
path: '/myUser/:id/:username',
component: myUser
}