vue系列_vue-Router_组件内部的路由守卫（局部路由守卫）01

最新推荐文章于 2024-08-13 04:17:13 发布

田江

最新推荐文章于 2024-08-13 04:17:13 发布

阅读量8.8k

点赞数 2

分类专栏： vue 文章标签： vue-router 路由守卫路由导航

本文链接：https://blog.csdn.net/jiang7701037/article/details/97605655

版权

vue 专栏收录该内容

49 篇文章 25 订阅

订阅专栏

如果你对vue的路由基础了解，就朝下看，不然不了解，请看vue系列_vue-Router入门和理解。

一、概念：

路由守卫：就是进入当前路由前，有个人“门卫”进行保护，也可以理解为“安检”。

在Vue组件里有个函数叫作：beforeRouteEnter。就是完成路由守卫的，表示进入当前路由前要做什么？

1、如下示例代码（先理解beforeRouteEnter函数）：

let goodslist={
	data:function(){
		return {}
	},
	template:"<h1>商品列表</h1>",
	beforeRouteEnter:function(to, from, next) {//进入组件前执行。
		console.log(to);
		console.log(from);
		next('/addGoods');//如果加了这句话，就永远进入不了当前组件，因为，无条件跳转到/addGoods
	},
	created:function(){
		console.log(this.$router);//在任何组件里都能看的router对象。因为，把router对象放在vue对象里
		console.log(this.$router.options);//这是路由配置
        console.log(this.$route);//当前路由，就是路径
	}
}

解释一、:

示例代码中，

beforeRouteEnter:function(to, from, next) {//进入组件前执行。
       console.log(to);
       console.log(from);
       next('/addGoods');//如果加了这句话，就永远进入不了当前组件，因为，无条件跳转到/addGoods
   },

完成的是路由守卫的工作，其实上面的代码，没有写路由守卫的逻辑，只是，解释了beforeRouteEnter函数的执行时机和参数的作用：

1、beforeRouteEnter 函数的执行时机，当点击路由连接时，进入组件时，组件还没有显示时执行

2、to：表示当前路由，即要进入的路由

3、from：表示从哪来的，

4、next() 表示下一步要干啥，next('/addGoods')就表示下一步，调到路由 /addGoods

所以，以上代码的执行结果时，如果你要想跳转到当前组件，“没门”，永远进入的都是 /addGoods路由对应的组件。

解释二、:

把函数beforeRouteEnter的代码改成如下（就可以完成简单的守卫了）：

beforeRouteEnter:function(to, from, next) {//进入组件前执行。
       if(!localStorage.getItem("username")){//如果没有登录，就先进入login组件进行登录
           next('/login');
       }
   }

二、完整的示例代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">	
	</style>
</head>
<body>
	<div id="app">
	    <router-link to='/addGoods'>添加商品</router-link>
    	<router-link to='/goodslist'>商品列表</router-link>
    	<hr/>
    	<router-view/>
	</div>
</body>
</html>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script type="text/javascript">

// 登录组件
let login={
	template:"<h1>亲，先登录噢</h1>"
}	

// import addGoods from './addGoods';//引入组件：addGoods
// 定义组件（不引入了，直接定义）
let addGoods={
	data:function(){
		return {}
	},
	template:"<h1>添加商品</h1>"
}
// import goodslist from './goodslist';//引入组件：goodslist
//定义组件（不引入了，直接定义）
let goodslist={
	data:function(){
		return {}
	},
	template:"<h1>商品列表</h1>"
	,
	beforeRouteEnter:function(to, from, next) {//进入组件前执行。
		if(!localStorage.getItem("username")){//如果没有登录，就先进入login组件进行登录
			next('/login');
		}
	}
}

//路由配置：是个json数组，不同的路径对应不同的组件
const routeObjs = [
  {
     path: '/addGoods',    //请求的路径：根目录下的addGoods
     component:  addGoods    //组件名
   },
  {
     path: '/goodslist',    //请求的路径：根目录下的goodslist
     component:  goodslist    //组件名
   },
   {
	   	path:'/login',
	   	component:login
   }
]

const router = new VueRouter({
  routes:routeObjs //routeObjs就是上面的路由配置
})


let vum = new Vue({
  el:"#app",
  router:router,//把路由对象传入到Vue对象里
  components:{
  	login,addGoods,goodslist
  }
})



</script>