vue导航守卫如何运用

本文详细介绍了Vue Router中的导航守卫机制,包括beforeEach守卫如何在路由跳转前进行权限验证,确保只有已登录用户才能访问特定页面。通过实例展示了如何使用守卫来检查本地存储的用户名和密码,实现登录状态的判断与导航控制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

每个守卫方法接收三个参数:
to: 即将要进入的目标 路由对象
from:当前导航正要离开的路由
next:: 放行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../node_modules/vue/dist/vue.js"></script>
		<script src="../node_modules/vue-router/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="app">
			<router-link to="/home">首页</router-link>
			<router-link to="/blog">我的博客</router-link>
			<router-link to="/login" >登录</router-link>
			<a href="javascript:void(0)" @click="clearOut">退出</a>
			<router-view></router-view>
		</div>
		
		<script>
			//声明组件
		 var Home={
			 template:`
			 <div>我是首页</div>
			 `
		 }
		 var Blog={
		 			 template:`
		 			 <div>我是博客</div>
		 			 `
		 }
		  var Login={
					data(){
						return{
							uname:'',
							psw:''
						}
					},
		 			 template:`
		 			 <div>
						 <input type="text" v-model="uname"/>admin
						 <input type="text" v-model="psw"/>密码
						 <input type="button" @click="handlerLogin"  value="登录">
					 </div>
		 			 `,
					 methods:{
						 handlerLogin(){
							 <!-- //保存用户名和密码 本地保存 -->
							 localStorage.setItem("username",{name:this.uname,psw:this.psw});
							<!-- //编程式导航 -->
							 this.$router.push({
								 path:'/blog' 
							 })
						 }
					 }
					 
		 }
		 var router=new VueRouter({
			 routes:[
				 {
					path:'/home',
					component:Home
				 },
				 {
				 	path:'/blog',
				 	component:Blog,
					<!-- 想在哪个组件做控制,跳转之前做配置 -->
					meta:{
						//用户访问该组件是否需要登录
						auth:true
					}
				 },
				 {
				 	path:'/login',
				 	component:Login
				 },
				
			 ]
		 })
		 router.beforeEach((to,from,next)=>{
			 console.log(to,from);
			if(to.meta.auth){
				<!-- //判断有没有用户名和密码 -->
				if(localStorage.getItem("username")){
					<!-- //有用户名说明已经登录 -->
					<!-- 放行 -->
					next()
				}else{
					<!-- //没有登录,渲染登录组件 -->
					next({
						path:"/login"
					})
				}
			}else{
				next()
			}
		 })
			//router挂载到实例上
			new Vue({
				el:"#app",
				router,
				methods:{
					clearOut(){
						localStorage.removeItem("username");
						this.$router.push({
							path:'/login'
						})
					}
				}
			
			})
		</script>
	</body>
</html>

### Vue.js 导航守卫的使用方法 Vue Router 提供了一种机制来拦截导航并执行逻辑操作,这种机制被称为 **导航守卫**。它们可以用于验证权限、加载数据或取消导航。 #### 全局前置守卫 全局前置守卫会在每次路由跳转之前被调用。它接收三个参数:`to`(目标路由)、`from`(当前路由)以及 `next`(继续函数)。如果未调用 `next()`,则不会进入下一个钩子或者完成导航[^1]。 ```javascript const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { console.log('Global Guard:', to.path); if (to.meta.requiresAuth && !isAuthenticated()) { next('/login'); // 如果需要认证但未登录,则重定向到登录页 } else { next(); // 继续导航 } }); ``` #### 路由独享守卫 特定于某个路由组件的守卫可以通过定义该组件内的 `beforeRouteEnter`, `beforeRouteUpdate`, 和 `beforeRouteLeave` 方法实现。这些方法允许我们在访问此组件前/更新时/离开时执行自定义逻辑。 ```javascript export default { beforeRouteEnter(to, from, next) { console.log('Entering component...'); next(vm => { /* 只有当组件实例化之后才能访问 */ }); }, beforeRouteUpdate(to, from, next) { this.message = 'Updating route...'; next(); }, beforeRouteLeave(to, from, next) { const answer = window.confirm('Do you really want to leave?'); if (answer) next(); } } ``` #### 全局解析守卫 类似于 `beforeEach` 的作用范围,但它主要用于处理异步请求或其他耗时任务,在所有导航完成后触发。 ```javascript router.beforeResolve((to, from, next) => { setTimeout(() => { console.log('All async components are resolved.'); next(); }, 1000); // 延迟一秒模拟等待时间 }); ``` #### 后置钩子 后置钩子不同于前面提到的守卫之处在于它不接受 `next` 函数也不会改变导航过程。它可以用来记录分析日志等用途。 ```javascript router.afterEach((to, from) => { ga('send', 'pageview', to.fullPath); // 发送Google Analytics事件跟踪 }); ``` 以上就是关于 Vue.js 中导航守卫的一些基本概念及其具体使用的介绍。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值