@路由再识

懒加载

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中的