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

我不是女神ヾ 2021-11-16 12:06 360阅读 0赞

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

## 一、概念： ##

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

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

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

**解释一、:**

示例代码中，

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-Router]: https://blog.csdn.net/jiang7701037/article/details/97600940