vue2进阶篇：vue-router之“使用组件内路由守卫”

2024-10-10 13:41:01 浏览数 (7)

@toc

10.13路由守卫

<font color='red'>注意点1：</font>

前置路由守卫或者后置路由守卫中，to指代切换到哪个路由组件，from指代从哪里来的路由组件，next指代下一个路由组件是否放行显示

<font color='red'>注意点2：</font>

如果想实现路由组件的to属性添加自定义属性用于权限判断，必须放在meta元数据属性中，meta就是用来存放自定义属性的，比如代码中的to.meta.isAuth，其中isAuth就是用来判断当前路由组件是否用于授权校验。

<font color='red'>注意点3：</font>

问题：判断路由组件是否需要鉴权，为啥不使用name属性，而要自定义isAuth属性？

<font color='red'>答案：</font>如果使用name属性，那么if条件判断就要写好多好多的判断，而使用isAuth属性就简单方便许多。

使用name属性

代码语言：java复制
if(to.name === ‘xinwen’ || to.name === ‘xiaoxi’ || to.name === ‘xiangqing’){ //判断是否需要鉴权

使用isAuth属性

代码语言：java复制
if(to.meta.isAuth){ //判断是否需要鉴权

<font color='red'>注意点4：</font>

如果想使用全局前置/后置路由守卫，路由配置文件index.js中不能直接暴露不然无法生效，要创建一个路由并配置鉴权规则后再暴露

错误写法：

代码语言：java复制
//创建并暴露一个路由器
export default new VueRouter({
...
})

正确写法：

代码语言：java复制
//创建并暴露一个路由器
const router =  new VueRouter({
...
})

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
...
})

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
...
})

export default router

<font color='red'>注意点5：</font>

问题：独享路由守卫是啥？

<font color='red'>答案：</font>就是某一个路由单独享有的路由守卫

<font color='red'>注意点6：</font>

只有前置独享路由守卫，没有后置。

<font color='red'>注意点7：</font>

问题：组件内路由守卫是啥？

<font color='red'>答案：</font>就是在单个组件内定义些路由守卫的东西。

<font color='red'>注意点8：</font>

问题：组件内路由守卫可以理解为前置和后置路由守卫吗？

<font color='red'>答案：不能。</font>

<font color='red'>区别点1：</font>因为组件内路由守卫，指代进入该组件和离开该组件时使用，强调“进入和离开”的动作，而全局路由守卫才强调“前置和后置”的动作。

<font color='red'>区别点2：</font>全局路由守卫的前置/后置，都会执行，而组件内路由守卫beforeRouteEnter一定会执行，但如果不离开，那么beforeRouteLeave就不会执行。

案例：将案例改为“使用组件内路由守卫”

要求：home和about路由组件可以随意展示，而news和message路由组件需要判断缓存中key为school，value的值是否为atguigu，是则放行，不是则弹窗提示无权限；同时切换路由组件是title标题也进行切换。

<font color='red'>改动的地方在路由配置文件index.js中和About.vue。</font>

完整代码

完整项目路径

main.js

代码语言：java复制
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入VueRouter
import VueRouter from 'vue-router'
//引入路由器
import router from './router'

//关闭Vue的生产提示
Vue.config.productionTip = false
//应用插件
Vue.use(VueRouter)

//创建vm
new Vue({
	el:'#app',
	render: h => h(App),
	router:router
})

App.vue

代码语言：java复制
<template>
  <div>
    <div class="row">
      <Banner/>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
					<!-- 原始html中我们使用a标签实现页面的跳转 -->
          <!-- <a class="list-group-item active" href="./about.html">About</a> -->
          <!-- <a class="list-group-item" href="./home.html">Home</a> -->

					<!-- Vue中借助router-link标签实现路由的切换 -->
					<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
						<!-- 指定组件的呈现位置 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
	import Banner from './components/Banner'
	export default {
		name:'App',
		components:{Banner}
	}
</script>

index.js

代码语言：java复制
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
const router =  new VueRouter({
	routes:[
		{
			name:'guanyu',
			path:'/about',
			component:About,
			meta:{isAuth:true,title:'关于'}
		},
		{
			name:'zhuye',
			path:'/home',
			component:Home,
			meta:{title:'主页'},
			children:[
				{
					name:'xinwen',
					path:'news',
					component:News,
					meta:{isAuth:true,title:'新闻'},
					/* beforeEnter: (to, from, next) => {
						console.log('前置路由守卫',to,from)
						if(to.meta.isAuth){ //判断是否需要鉴权
							if(localStorage.getItem('school')==='atguigu'){
								next()
							}else{
								alert('学校名不对，无权限查看！')
							}
						}else{
							next()
						}
					} */
				},
				{
					name:'xiaoxi',
					path:'message',
					component:Message,
					meta:{isAuth:true,title:'消息'},
					children:[
						{
							name:'xiangqing',
							path:'detail',
							component:Detail,
							meta:{isAuth:true,title:'详情'},

							//props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
							// props:{a:1,b:'hello'}

							//props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
							// props:true

							//props的第三种写法，值为函数
							props($route){
								return {
									id:$route.query.id,
									title:$route.query.title,
									a:1,
									b:'hello'
								}
							}

						}
					]
				}
			]
		}
	]
})

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
/* router.beforeEach((to,from,next)=>{
	console.log('前置路由守卫',to,from)
	if(to.meta.isAuth){ //判断是否需要鉴权
		if(localStorage.getItem('school')==='atguigu'){
			next()
		}else{
			alert('学校名不对，无权限查看！')
		}
	}else{
		next()
	}
}) */

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
	console.log('后置路由守卫',to,from)
	document.title = to.meta.title || '硅谷系统'
})

export default router

About.vue

代码语言：java复制
<template>
	<h2>我是About的内容</h2>
</template>

<script>
	export default {
		name:'About',
		/* beforeDestroy() {
			console.log('About组件即将被销毁了')
		},*/
		/* mounted() {
			console.log('About组件挂载完毕了',this)
			window.aboutRoute = this.$route
			window.aboutRouter = this.$router
		},  */
		mounted() {
			// console.log('%%%',this.$route)
		},

		//通过路由规则，进入该组件时被调用
		beforeRouteEnter (to, from, next) {
			console.log('About--beforeRouteEnter',to,from)
			if(to.meta.isAuth){ //判断是否需要鉴权
				if(localStorage.getItem('school')==='atguigu'){
					next()
				}else{
					alert('学校名不对，无权限查看！')
				}
			}else{
				next()
			}
		},

		//通过路由规则，离开该组件时被调用
		beforeRouteLeave (to, from, next) {
			console.log('About--beforeRouteLeave',to,from)
			next()
		}
	}
</script>

Home.vue

代码语言：java复制
<template>
	<div>
		<h2>Home组件内容</h2>
		<div>
			<ul class="nav nav-tabs">
				<li>
					<router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
				</li>
				<li>
					<router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
				</li>
			</ul>
			<!-- 缓存多个路由组件 -->
			<!-- <keep-alive :include="['News','Message']"> -->
				
			<!-- 缓存一个路由组件 -->
			<keep-alive include="News">
				<router-view></router-view>
			</keep-alive>
		</div>
	</div>
</template>

<script>
	export default {
		name:'Home',
		/* beforeDestroy() {
			console.log('Home组件即将被销毁了')
		}, */
		/* mounted() {
			console.log('Home组件挂载完毕了',this)
			window.homeRoute = this.$route
			window.homeRouter = this.$router
		},  */
	}
</script>

News.vue

代码语言：java复制
<template>
	<ul>
		<li :style="{opacity}">欢迎学习Vue</li>
		<li>news001 <input type="text"></li>
		<li>news002 <input type="text"></li>
		<li>news003 <input type="text"></li>
	</ul>
</template>

<script>
	export default {
		name:'News',
		data() {
			return {
				opacity:1
			}
		},
		// beforeDestroy() {
		// 	console.log('News组件即将被销毁了')
		// 	clearInterval(this.timer)
		// },
		// mounted(){
		// 	this.timer = setInterval(() => {
		// 		console.log('@')
		// 		this.opacity -= 0.01
		// 		if(this.opacity <= 0) this.opacity = 1
		// 	},16)
		// },
		activated() {
			console.log('News组件被激活了')
			this.timer = setInterval(() => {
				console.log('@')
				this.opacity -= 0.01
				if(this.opacity <= 0) this.opacity = 1
			},16)
		},
		deactivated() {
			console.log('News组件失活了')
			clearInterval(this.timer)
		},
	}
</script>

Message.vue

代码语言：java复制
<template>
	<div>
		<ul>
			<li v-for="m in messageList" :key="m.id">
				<!-- 跳转路由并携带params参数，to的字符串写法 -->
				<!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>&nbsp;&nbsp; -->

				<!-- 跳转路由并携带params参数，to的对象写法 -->
				<router-link :to="{
					name:'xiangqing',
					query:{
						id:m.id,
						title:m.title
					}
				}">
					{{m.title}}
				</router-link>
				<button @click="pushShow(m)">push查看</button>
				<button @click="replaceShow(m)">replace查看</button>
			</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'}
				]
			}
		},
		methods: {
			pushShow(m){
				this.$router.push({
					name:'xiangqing',
					query:{
						id:m.id,
						title:m.title
					}
				})
			},
			replaceShow(m){
				this.$router.replace({
					name:'xiangqing',
					query:{
						id:m.id,
						title:m.title
					}
				})
			}
		},
		beforeDestroy() {
			console.log('Message组件即将被销毁了')
		},
	}
</script>

Detail.vue

代码语言：java复制
<template>
	<ul>
		<li>消息编号：{{id}}</li>
		<li>消息标题：{{title}}</li>
	</ul>
</template>

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

Banner.vue

代码语言：java复制
<template>
	<div class="col-xs-offset-2 col-xs-8">
		<div class="page-header">
			<h2>Vue Router Demo</h2>
			<button @click="back">后退</button>
			<button @click="forward">前进</button>
			<button @click="test">测试一下go</button>
		</div>
	</div>
</template>

<script>
	export default {
		name:'Banner',
		methods: {
			back(){
				this.$router.back()
				// console.log(this.$router)
			},
			forward(){
				this.$router.forward()
			},
			test(){
				this.$router.go(3)
			}
		},
	}
</script>

Index.html

代码语言：java复制
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>硅谷系统</title>
<link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
  </body>
</html>

bootstrap.css网上搜一个拷贝进来，这个上前行代码就不拷贝过来了

结果展示：

本人其他相关文章链接

1.《vue2进阶篇：路由》第10章：vue-router，包括基础路由、嵌套路由、路由的query参数和params参数、命名路由、router-link的replace属性、编程式路由、缓存路由组件

2.vue2进阶篇：安装路由

3.vue2进阶篇：vue-router之基础路由

4.vue2进阶篇：vue-router之嵌套（多级）路由

5.vue2进阶篇：vue-router之路由的query参数

6.vue2进阶篇：vue-router之命名路由

7.vue2进阶篇：vue-router之路由的params参数

8.vue2进阶篇：vue-router之路由的props配置

9.vue2进阶篇：vue-router之router-link的replace属性

10.vue2进阶篇：vue-router之编程式路由导航

11.vue2进阶篇：vue-router之缓存路由组件

12.vue2进阶篇：vue-router之两个新的生命周期钩子

13.vue2进阶篇：vue-router之使用“全局路由守卫”

14.vue2进阶篇：vue-router之“使用独享路由守卫”

15.vue2进阶篇：vue-router之“使用组件内路由守卫”

16.vue2进阶篇：vue-router之路由的2种工作模式

vue.js vuejs2 前端

0 人点赞