二、 缓存路由组件
1.作用
2.前提知识
3.编码方法
一、路由守卫
1.作用
**对路由进行权限控制。**当满足条件时,才进行路由切换,如,某些页面需要用户登录之后才能看到,又称为导航守卫,官方文档:导航守卫 | Vue Router
2.分类
全局守卫、独享守卫、组件内守卫
3.案例展示
当用户点击 Home主页时,路由跳转到 Home 页面;当用户点击 User中心 时,如果用户已经登录了,localStorage 存储了该用户的信息,则进行跳转,否则不跳转
a.全局路由守卫
全局路由守卫分为全局前置守卫和全局后置守卫。全局路由守卫经常被使用
beforeEach( ) 全局前置守卫:初始化时执行、每次路由切换前执行;
如下:不进行任何路由切换时,每次初始化时,都会执行全局前置守卫
import VueRouter from “vue-router”
//创建并暴露一个路由器
const router = new VueRouter({
routes:[
{
path:‘/about’,
component:() => import (‘…/pages/About.vue’)
},
{
path:‘/home’,
component:()=> import(‘…/pages/Home.vue’),
},
{
path:‘/user’,
component:()=> import(‘…/pages/User.vue’)
}
]
})
//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach(()=>{ </