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

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

 

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值