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

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

一、概念：

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

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

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

let goodslist={
	data:function(){
		return {}
	},
	template:"
商品列表
",
	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');
        }
    }

二、完整的示例代码：

	
	
	


	

	    添加商品
    	商品列表