Vue路由守卫案例代码

//全局前置守卫
router.beforeEach((to,from,next) =>{
  //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
  //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
  //第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
})

router.afterEach((to,from) =>{
  //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
  //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象

//该文件用于创建整个应用的router
//首先，需要引用vue-router
import VueRouter from "vue-router";

//引入路由组件
import TestA from '../pages/TestA'
import TestB from '../pages/TestB'
// 引入二级路由组件
import TestBHzw from '../pages/TestBHzw'
import TestBHyrz from '../pages/TestBHyrz'

import DataList from '../pages/DataList'

//创建并暴露一个VueRouter
const router =  new VueRouter({
    routes:[
        //配置路由路径和路由组件
        {
            //这里的路径可自由定义，但是为了初学者好理解，我就采用和组件同样的命名，防止在写路径的时候搞混
            name:'导航一',
            path:'/TestA',
            component:TestA,     //要跳转到的组件   
            children:[
                {
                    // 给二级路由起名字
                    name:'DataName',
                    path:'DataList/:introduce',     //起到占位作用
                    component:DataList
                }
            ]
        },
        {
            name:'导航二',
            path:'/TestB',
            component:TestB,
            meta:{isAuth:true,},
            // 配置二级路由
            children:[
                {
                    path:'TestBHzw',     //重点注意，不要加 /
                    component:TestBHzw
                },
                {
                    path:'TestBHyrz',
                    component:TestBHyrz
                }
            ]
        }
    ]
})

//全局前置路由，配合浏览器localStorage进行鉴权操作
router.beforeEach((to, from, next) =>{
    //首先，我们先看一看to和from参数，next就是执行的意思，不写页面是不会跳转的
    // console.log(to, from);
    if(to.meta.isAuth){     //判断是否需要鉴权
        if(localStorage.getItem('name') === '张三'){
            next();
        }else{
            alert('不好意思，姓名不对，没有权限');
        }
    }else{
        next()
    }
})

// 全局后置路由，简单写一个弹窗，在进入每一个路由组件后弹出一句话
router.afterEach(() =>{
    alert('欢迎你！！');
})

export default router;

<template>
  <div>
    <h4>著名动漫简介</h4>
    <ul>
      <li v-for="i in DataList" :key="i.id">
        <!-- 使用params参数传递动态参数 注意：params传递参数必须配合name属性-->
        <router-link :to="{
          name:'DataName',
          params:{
            introduce:i.introduce
          }
        }">{{i.name}}</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
    name:'TestA',
    data(){
      return{
        DataList:[
          {
            id:1,
            name:'《海贼王》',
            introduce:'《航海王》是日本漫画家尾田荣一郎作画的少年漫画作品，于1997年7月22日在集英社《周刊少年Jump》开始连载。改编的电视动画《航海王》于1999年10月20日起在富士电视台首播。'
          },
          {
            id:2,
            name:'《火影忍者》',
            introduce:'电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画，2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；第二季《火影忍者疾风传》于2007年2月15日－2017年3月23日在东京电视台播出，共500话；累计全720话。'
          },
          {
            id:3,
            name:'《斗破苍穹》',
            introduce:'《斗破苍穹》是一部由阅文集团旗下起点中文网作家天蚕土豆同名玄幻长篇经典小说改编的动画。该动画第一季已于2017年1月7日在腾讯视频上映，bilibili同步跟播，共十二集。'
          },
          {
            id:4,
            name:'《鬼灭之刃》',
            introduce:'《鬼灭之刃》是日本漫画家吾峠呼世晴所著的少年漫画，自2016年2月15日—2020年5月11日在集英社《周刊少年Jump》上连载。已完结。'
          }
        ]
      }
    }
}
</script>

<style scoped>
h4{
  text-align: center;
}
a{
  text-decoration: none;
}
.active:visited{
  color: brown;
}
</style>

<template>
  <div>
    <h4>我是内容二</h4>
    <!-- 多级路由 -->
    <div class="box">
      <!-- 此处路径一定要写完整路径 -->
      <router-link to="/TestB/TestBHzw" active-class="active">点击查看《海贼王的简介》</router-link>&nbsp;&nbsp;&nbsp;
      <router-link to="/TestB/TestBHyrz" active-class="active">点击查看《火影忍者的简介》</router-link>
      <hr>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
    name:'TestB',
}
</script>

<style scoped>
h4{
  text-align: center;
}
.box{
  text-align: center;
}
a{
  text-decoration: none;
}
.active:visited{
  color: brown;
}
</style>

  <template>
  <div>
      <ul>
          <!-- 采用插值语法就可以拿到父级路由中的数据 -->
          <li>{{$route.params.introduce}}</li>
      </ul>
  </div>
</template>

<script>
export default {
    name:'DataList'
}
</script>

<style>

</style>

<template>
  <div>
    <p>
      电视动画《火影忍者》改编自日本漫画家岸本齐史的同名漫画，
      2002年10月3日在东京电视台系列全6局、岐阜放送首播，共220话；
      第二季《火影忍者疾风传》于2007年2月15日－2017年3月23日在东京电视台播出，共500话；累计全720话。
    </p>
  </div>
</template>

<script>
export default {
    name:'TestBHyrz'
}
</script>

<style>

</style>

beforeEnter(to,from,next){
  //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
  //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
  //第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
}

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
  //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
  //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
  //第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {
  //第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象
  //第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
  //第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
}