文章目录
一、案例代码展示
源码地址: 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传参
-
传递参数
<!-- 跳转并携带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>
-
接收参数:
$route.query.id $route.query.title
3-2 全局前置路由守卫
-
作用:对路由进行权限控制
-
分类:全局守卫、独享守卫、组件内守卫
-
全局前置守卫:
//全局前置守卫:初始化时执行、每次路由切换前执行 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中的选项