VUE进阶 - 路由

路由守卫，元信息，路由权限，动态路由

路由的生命周期函数，每次跳转页面都会触发所有生命周期函数
在路由中判断权限的用法，动态路由等用法示例

路由页面

import Vue from 'vue'
import VueRouter from 'vue-router'
import A from '../views/a.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'A',
    component: A,    
    meta:{title:"首页这里是"}
  },
  {
    path: '/style',
    name: 'B',
    component: () => import('../views/b.vue'),
    meta:{auth:true,keepAlive: false}
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/login.vue')
  },
  {
    path: '*',
    name: '404',
    component: () => import('../views/404.vue')
  }
]
const router = new VueRouter({
  routes
})
export default router


//路由的生命周期函数，每次跳转页面都会触发所有生命周期函数
//以下是一个在路由中判断权限的用法
router.beforeEach((to, from, next) => {
  console.log('1beforeEach', to, from)  

  //通过 meta 定义路由元信息
  document.title = to.meta.title?to.meta.title:"如花商城"

  if (to.matched.some(m => m.meta.auth)) {
    console.log("要检测权限");     
    if (localStorage.getItem('token')) {
      next();
    }else{
      console.log("无token跳登陆");     
      next('/Login')
    }
  } else { 
    console.log("不检测权限");     
    next()
  }
})
router.beforeResolve((to, from, next) => {
  console.log('全局路由2', to, from)
  next()
})
router.afterEach((to, from) => {
  console.log('全局路由3', to, from)
})

先后顺序

全局路由1 > 局部路由1 > 全局2、3 >离开时局部路由

页面A

<template>
  <div>
    <div @click="jump">跳到B</div>
    <div @click="jumpC">跳到C--{{is_c?"有了":"没有C所以空白"}}</div>
    <br />    <br />    <br />
    <div @click="addRoute">动态添加-隐藏页C到路由</div>
  </div>
</template>
<script>
import C from "./c.vue";
export default {
  data() {
    return {
      is_c: false
    };
  },
  beforeCreate() {
    console.log("home声明周期");
  },
  beforeRouteEnter(to, from, next) {
    // 不能获取组件实例 `this`
    console.log("局部路由1", to, from);
    next();
  },
  beforeRouteUpdate(to, from, next) {
    //如参数id=3
    console.log("变更时的路由2", to, from);
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log("离开时的路由3", to, from);
    next();
  },
  methods: {
    jump() {
      this.$router.push("./style");
    },
    jumpC() {
      this.$router.push("./c");
    },
    addRoute() {
      this.is_c = true;
      this.$router.addRoutes([
        {
          path: "/c",
          component: C,
          meta: { title: "隐藏页C" }
        }
      ]);
    }
  }
};
</script>

页面B

<template>
  <div id="root"> 
   <div @click="jump">bbb</div>
  </div>
</template>
<script>
export default {
  methods: {
    jump() {
        this.$router.push('./')
      }
  }
};
</script> 

页面C

<template>
  <div>
    <div @click="jump">C</div>
    一刷新就没有了，因为该页是动态添加的
  </div>
</template>
<script>
export default { 
  methods: {
      jump() {
        this.$router.push('./')
      }
  }
};
</script>

Login页面

<template>
  <div>
    <div @click="jump">login</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
     
    };
  }, 
  methods: {
      jump() {
        this.$router.push('./')
      }
  }
};
</script>