vue系列_vue-Router_全局路由守卫

比眉伴天荒 2021-11-16 12:12 351阅读 0赞

一、给vue-Router的对象（实例），增加如下代码：

router.beforeEach((to, from, next) => {
    	console.log(to.fullPath);
    	if(to.fullPath!='/login'){//如果不是登录组件
    		if(!localStorage.getItem("username")){//如果没有登录，就先进入login组件进行登录
    			next('/login');
    		}else{//如果登录了，那就继续
    			next();
    		}
    	}else{//如果是登录组件，那就继续。
    		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>"
    	
    }
    
    //路由配置：是个json数组，不同的路径对应不同的组件
    const routeObjs = [
      {
    		path: '/addGoods',    //请求的路径：根目录下的addGoods
    		component:  addGoods    //组件名
       },
      {
    		path: '/goodslist',    //请求的路径：根目录下的goodslist
    		component:  goodslist    //组件名
    
       },
       {
    	   	path:'/login',
    	   	component:login
       }
    ]
    
    const router = new VueRouter({
      routes:routeObjs //routeObjs就是上面的路由配置
    })
    
    router.beforeEach((to, from, next) => {
    	console.log(to.fullPath);
    	if(to.fullPath!='/login'){//如果不是登录组件
    		if(!localStorage.getItem("username")){//如果没有登录，就先进入login组件进行登录
    			next('/login');
    		}else{//如果登录了，那就继续
    			next();
    		}
    	}else{//如果是登录组件，那就继续。
    		next();	
    	}
    })
    
    let vum = new Vue({
      el:"#app",
      router:router,//把路由对象传入到Vue对象里
      components:{
      	login,addGoods,goodslist
      }
    })
    
    
    
    </script>