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

最新推荐文章于 2023-10-10 16:15:11 发布

田江

最新推荐文章于 2023-10-10 16:15:11 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签： vue-Router 路由守卫全局路由守卫

本文链接：https://blog.csdn.net/jiang7701037/article/details/97608920

版权

vue 专栏收录该内容

49 篇文章 25 订阅

订阅专栏

一、给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>

田江

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
vue系列_vue-Router_全局路由守卫

一、给vue-Router的对象（实例），增加如下代码：router.beforeEach((to, from, next) => { console.log(to.fullPath); if(to.fullPath!='/login'){//如果不是登录组件 if(!localStorage.getItem("username")){//如果没有登录，就先进入login组件进...
复制链接

扫一扫