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

如果你对vue的路由基础了解，就朝下看，不然不了解，请看vue系列_vue-Router入门和理解。一、概念：路由守卫：就是进入当前路由前，有个人“门卫”进行保护，也可以理解为“安检”。在Vue组件里有个函数叫作：beforeRouteEnter。就是完成路由守卫的，表示进入当前路由前要做什么？1、如下示例代码（先理解beforeRouteEnter函数）：let good...

田江

8842人浏览 · 2019-07-28 07:21:44

田江 · 2019-07-28 07:21:44 发布

如果你对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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^