懒加载
import index from './index.vue'
改为
var index=()=>import('./index.vue')
用懒加载导入的方式处理每一个组件,每一个组件都会单独生成一个js文件,你实际访问哪个路由,对应的组件文件才会加载。
路由守卫
// 设置全局路由守卫 判断用户是否登录
router.beforeEach((to,from,next)=>{
// to将要去的路由对象
//from来自哪的路由对象
//next给权限,允许访问
var accessRoutes=['/路由地址','/路由地址'];
var token=localStorage.getItem('token');
if(accessRoutes.includes(to.path)){//是否包含该字符串片段
if(token){ //判断有没有token
next();//给权限,允许访问
}else{
next('./路由地址')//没有就去登录页
}
}else{
next();//访问的是其他路由
}
})
小面
keep-alive的属性与作用
keep-alive提供了三个可选属性
1.include -字符串或数组或正则表达式。只有名称匹配的组件会被缓存
2.exclude -字符串或数组或正则表达式。名称匹配的组件不会被缓存。
3.max-数字类型。表示最多可以缓存多少组件实例。
作用:
kep lie是一个Ve的内置租件,它能将不活动的组件保存下来,而不是直接销毁,当我们再次访问这个组件的时候,会先从keep-alive中存储的组件中寻找,如果有缓存的话,直接渲染之前缓存的,如果没有的话,再加载对应的组件。作为抽象组件, keep-alive是不会直接渲染在DOM中的