Vue路由守卫

Vue 路由守卫
案例

Vue 路由守卫

router.beforeEach: 全局前置路由守卫，每次切换之前被调用，可以做权限拦截
router.afterEach: 全局后置路由守卫，每次切换之后调用, 可用于切换document.title
router.beforeEnter: 独享路由守卫，只有前置，没有后置，写在routes配置项里
router.beforeRouteEnter: 组件内路由守卫, 写在组件中，路过路由规则进入该组件时被调用
router.beforeRouteLeave: 组件内路由守卫, 写在组件中，路过路由规则离开该组件时被调用

全局前置路由守卫

router.beforeEach((to,from,next)=>{})
每次前置路由守卫都要调next方法，否则无法继续

全局后置守卫

router.afterEach((to,from)=>{})

独享路由守卫

router.beforeEnter((to,from,next)=>{})

组件内路由守卫

router.beforeRouteEnter((to,from,next)=>{}): 组件内路由守卫, 写在组件中，路过路由规则进入该组件时被调用
router.beforeRouteLeave((to,from,next)=>{}): 组件内路由守卫, 写在组件中，路过路由规则离开该组件时被调用

案例

main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import router from './router'

// 关闭Vue的生产提示
Vue.config.productionTip = false

Vue.use(VueRouter)


// 全局路由前置守卫
router.beforeEach((to,from,next)=>{
  console.log('beforeEach',to,from)
  next()
})

// 全局路由后置守卫
router.afterEach((to,from)=>{
  console.log('afterEach',to,from);
})



// 创建Vue实例
new Vue({
  // 将app组件放入容器中
  render: h => h(App),
  router
}).$mount('#app')

router/index.js

import VueRouter from 'vue-router'
import Island from '../pages/Island'
import Polaris from '../pages/Polaris'

export default new VueRouter({
    routes: [
        {
            component: Island,
            path: "/Island",
            props: ($routes) => ({
                id: $routes.query.id,
                title: $routes.query.title
            })
        },
        {
            component: Polaris,
            path: "/Polaris",
            // 组件独享路由守卫
            beforeEnter:(to,from,next)=>{
                next()                
            }
        },
    ]
})

island.vue

<template>
  <h1>
    message by Island
    {{ id }}
    -
    {{ title }}
  </h1>
</template>

<script>
export default {
  props: ["id", "title"],
  name: "Island",
  created() {
    console.log("Isalnd 创建");
  },
  beforeDestroy() {
    console.log("Isalnd 即将被销毁");
  },
  activated() {
    console.log("Island 激活...");
  },
  deactivated() {
    console.log("Island 失活...");
  },
  // 组件路由前置守卫
  beforeRouteEnter(to, from, next) {
    console.log("beforeRouteEnter", arguments);
    next();
  },
  // 组件路由后置守卫
  beforeRouteLeave(to, from, next) {
    console.log("beforeRouteLeave", arguments);
    next();
  },
};
</script>

<style scoped>
h1 {
  color: salmon;
}
</style>