目录
一、路由基础
路由机制
1.声明路由对象数组
2.创建路由器实例对象
3.将路由器实例注册vue根实例
4.通过router-link标签访问组件
5.路由导航守卫
二、动态路由匹配
响应路由参数的变化/监听路由url地址栏参数变化？
一、路由基础
路由机制
通过路由加载组件的方式，主要处理单页面应用程序。
1.声明路由对象数组
// 声明路由对象数组 对象存放一个组件路由信息 通过路由映射组件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}];2.创建路由器实例对象
const router = new VueRouter({
routes:routes,
路由模式
mode:''
});
// 创建路由器对象 将路由对象数组挂载到路由器对象中const router = new VueRouter({routes,// 路由模式mode: 'hash'});3.将路由器实例注册vue根实例
new Vue({
router
})
4.通过router-link标签访问组件
<router-link to='/myA'>A组件</router-link>
路由出口匹配
<router-view></router-view>
<!-- 通过路由方式加载组件 router-link --><router-link to="/myA">去A组件</router-link> |<router-link to="/myB">去B组件</router-link> |<router-link to="/aa">去A组件</router-link><router-link to="/user/1/terry">用户组件</router-link><!-- router-link本质创建a标签 --><!-- <a href="#/myA">去A组件</a> --><!-- 通过router-view匹配路由出口 --><router-view></router-view>5.路由导航守卫
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();}二、动态路由匹配
不同用户加载同一个组件,通过动态路径参数实现动态路由匹配。
响应路由参数的变化/监听路由url地址栏参数变化？
1.watch 监听路由对象，to即将进入的路由有params对象可以获取到最新的路由参数
2.beforeRouteUpdate 使用组件内的导航守卫beforeRouteUpdate监听到路由参数变化，即将进入路由to对象中params属性中可以获取到最新的参数
注意：使用created钩子获取路由对象参数只能获取到最初进入组件内路由的参数
<user>用户组件--{{id}}--{{username}}</user>
{// 动态路径参数path: '/myUser/:id/:username',component: myUser}
