vue登录鉴权，组件keepalive

app页面

判断router是否拥有keepalive的meta， 有的话进入第一个占位符，没有的话进入第二个占位符

路由index.js

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: () => import(/* webpackChunkName: "about" */ '../components/home.vue'),
    meta: {
    // 添加该字段，表示进入这个路由是需要登录的
      requireAuth: true,  
      // 是否刷新
      keepAlive: false    
    }},
    {
    path: '/login',
    name: 'Login',
    component: () => import(/* webpackChunkName: "about" */ '../components/login.vue'),
    meta: {
     // 添加该字段，表示进入这个路由是需要登录的
      requireAuth: false, 
      // 是否刷新
      keepAlive: true,
    }},
    {
      path: '/',
      // 重定向路由
      redirect: '/login',
    }
  
]
const router = new VueRouter({
  // 去除哈希模式的#
  mode: 'history',
  routes
})

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
    if (localStorage.getItem("Token名称")) {
      // ('有token'，放行);

      next();
    }
    else {
      // ('没有权限'，回去登录)
      next({
        path: '/login',
      })
    }
  }
  else {
  //不需要权限，放行
    next();
  }
})```

登录页面的axios方法
async send(){
        var ret = await axios.post('/login', this.ruleForm);
        let data = ret.data;
        if (data.meta.status == 200){
            localStorage.setItem("Token", data.data.token);
            this.$router.push('/home')
        }
        else if (status == 400){
            alert('用户不存在');
            
        }
    }

单独组件间控制否刷新
export default {
        data() {
            return {};
        },
        methods: {
        beforeRouteLeave(to, from, next) {
             // 设置下一个路由的 meta,实现是否刷新
            to.meta.keepAlive = true;  
            next();
            }
        }
};

*学习了https://www.jianshu.com/p/0b0222954483大佬关于keepalive的理解*