vue多级路由跳转+传参+栗子详解【如何使用路由守卫】【源码放置于Gitee中】

一、案例代码展示

源码地址: https://gitee.com/hannah_bingo/vue_demo/
vue-router多级路由的使用

• 欢迎star+fork

二、代码讲解

2-1 路由

2-1-1 父子结构

const router = new VueRouter({
  routes: [
    {
      path: "/about",
      component: About,
      meta: { title: "关于" },
    },
    {
      path: "/home",
      component: Home,
      meta: { title: "主页" },
      children: [
        {
          path: "news",
          component: News,
          meta: { title: "新闻" },
        },
        {
          path: "message",
          component: Message,
          meta: { title: "消息" },
          children: [
            {
              name: "xiangqing",
              path: "detail",
              component: Detail,
                props($route) {
                return { id: $route.query.id, title: $route.query.title };
              },
              meta: { isAuth: true, title: "详情" },
            },
          ],
        },
      ],
    },
  ],
});

2-1-2 前后置守卫

只有相关用法，限制范围并没有起到有效拦截作用

// 全局前置路由守卫--每次路由切换之前，初始化的时候被调用
router.beforeEach((to, from, next) => {
  console.log("路由前置守卫", to, from);
  if (to.meta.isAuth) {
    if (to.path === "/home/message/detail") {
      next();
    } else {
      alert("学校名不对，无权限查看");
    }
  } else {
    next();
  }
});

router.afterEach((to, from) => {
  console.log("后置路由守卫", to, from);
  document.title = to.meta.title || "主页";
});

2-2 点击消息001,002…显示不同内容[query传参]

Message --传递params—> Detail
目录结构：

2-2-1 Message.vue

<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <router-link
          :to="{
            path: '/home/message/detail',
            query: {
              id: m.id,
              title: m.title,
            },
          }"
          >{{ m.title }}</router-link
        >
      </li>
    </ul>
    <hr />
    <router-view> </router-view>
  </div>
</template>

<script>
export default {
  name: "Message",
  data() {
    return {
      messageList: [
        { id: "001", title: "消息001" },
        { id: "002", title: "消息002" },
        { id: "003", title: "消息003" },
      ],
    };
  },
};
</script>

<style></style>

2-2-2 Detaile.vue

<template>
  <div>
    <!-- <h2>detail组件</h2> -->
    <li>消息编号：{{$route.query.id}}</li>
    <li>消息标题：{{$route.query.title}}</li>
    <li>消息编号：{{$route.params.id}}</li>
    <li>消息标题：{{$route.params.title}}</li>
    <li>{{id}}</li>
    <li>{{title}}</li>
  </div>
</template>

<script>
export default {
  name: 'Detail',
  props:['id','title'],
  mounted() {
    console.log(this.$route);
  }
}
</script>

<style>

</style>

三、 相关知识点的讲解

Gitee地址 vue-router多级路由的使用
详细笔记地址

3-1 query传参

1. 传递参数

   
   <!-- 跳转并携带query参数，to的字符串写法 -->
   <router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
   				
   <!-- 跳转并携带query参数，to的对象写法 -->
   <router-link 
   	:to="{
   		path:'/home/message/detail',
   		query:{
   		   id:666,
               title:'你好'
   		}
   	}"
   >跳转</router-link>
   

2. 接收参数：

   $route.query.id
   $route.query.title
   

3-2 全局前置路由守卫

1. 作用：对路由进行权限控制

2. 分类：全局守卫、独享守卫、组件内守卫

3. 全局前置守卫:

   //全局前置守卫：初始化时执行、每次路由切换前执行
   router.beforeEach((to,from,next)=>{
   	console.log('beforeEach',to,from)
   	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
   		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
   			next() //放行
   		}else{
   			alert('暂无权限查看')
   			// next({name:'guanyu'})
   		}
   	}else{
   		next() //放行
   	}
   })
   

四、 导航守卫

主要用来通过跳转或取消的方式守卫导航

4-1 基本概念

1、 导航守卫： 路由跳转过程中的一些钩子函数

• 路由跳转是一个大的过程，分为跳转前中后
• 在每一个过程中都有一函数，这个函数能让你操作一些其他事儿

4-2 路由守卫的具体方法：

1、全局前置守卫： 可以使用router.beforeEach注册一个全局前置守卫

const router = new VueRouter({...})
router.beforeEach((to, from, next) => {
	// ...
})

• 当一个导航开始时，全局前置守卫按照注册顺序调用
• 守卫是异步链式调用的，导航在最后一层中

new Promise((resolve,reject) => {
	resolve('第一个全局前置守卫')
}.then(() => {
	return '第二个全局前置守卫'
}.then(()=>{
	...
}.then(() => {
	console.log('导航终于开始了')
}))))

2、 每个守卫方法接收三个参数（往后的守卫都大同小异）

• to: Route,即将要进入的目标路由对象
• from： Route，当前导航正要离开的路由
• next： Function：一定要调用该方法将控制权交给下一个守卫，执行效果依赖next方法的参数

3、

• next() : 进入下一个守卫。如果全部守卫执行完了，则导航的状态就是confirmed(确认的)
• next(false): 中断当前的导航。如果浏览器的URL改变（用户手动或浏览器后退按钮），URL地址会重置到from路由对应的地址
• next(‘/’) 或者 next({ path:‘/’ }): 跳转到一个不同的地址。当前导航被中断，然后进行一个新的导航。向next传递任意位置对象，且允许设置replace: true、name:'home’之类的选项以及任何用在router-link的to prop或router.push中的选项