Vue3中的导航守卫如何使用

一、什么是导航守卫？

查看以下情形：

默认情况下，点击主页链接可直接进入指定界面，但是该界面是需要用户登录后方可访问的，这是个问题

Vue3中的导航守卫如何使用-LMLPHP

可设置导航守卫来检测用户是否登录，如果已登录，则进入后台页，如果未登录，则强制进入登录页，如图

Vue3中的导航守卫如何使用-LMLPHP

二、导航守卫有哪几种？

1、全局守卫（3个）

全局前置守卫

1、使用方式

你可以在 router/index.js 页面中使用 router.beforeEach((to, from, next) => {}) 注册一个全局前置守卫。

2、代码：

// router/index.js 页面

router.beforeEach((to, from, next) => {
    console.log(to, from);
    next()
});

登录后复制

全局解析守卫

2、代码：

// router/index.js 页面

router.beforeResolve((to, from, next) => {
    console.log(to,from);
    next()
})

登录后复制

全局后置钩子

2、代码：

// router/index.js 页面

router.afterEach((to, from) => {
    console.log(to,from);
})

登录后复制

它们对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。

2、路由独享守卫（1个）

1、使用方式

你可以直接在路由配置上定义 beforeEnter 守卫：

2、代码：

// router/index.js 页面（路由规则中）

const routes = [
	{
	    path: '/home',
	    name: 'Home',
	    component: HomeView,
	    beforeEnter: (to, from,next) => {
	        console.log(to, from);
	        next()
	    },
	}, 
]

登录后复制

3、组件内守卫（3个）

组件内守卫有个三个：路由进入之前beforeRouteEnter，路由离开时beforeRouteLeave,页面更新时beforeRouteUpdate

beforeRouteEnter(to, from, next)

2、代码：

// vue 组件内使用

onBeforeRouteUpdate((to, from) => {
  //当前组件路由改变后，进行触发
  console.log(to);
});

登录后复制

beforeRouteUpdate(to, from, next)

2、代码：

// vue 组件内使用

onBeforeRouteUpdate((to, from) => {
  //当前组件路由改变后，进行触发
  console.log(to);
});

登录后复制

beforeRouteLeave(to, from, next)

2、代码：

// vue 组件内使用

onBeforeRouteLeave((to, from) => {
  //离开当前的组件，触发
  alert("我离开啦");
});

登录后复制

三、导航守卫的三个参数

to：将要访问的路由信息对象
from：将要离开的路由信息对象
next：函数
调用next()表示放行，允许这次路由导航
调用next(false)表示不放行，不允许此次路由导航
调用next({routerPath})表示导航到此地址，一般情况用户未登录时，会导航到登陆界面

Vue3中的导航守卫如何使用-LMLPHP

四、如何在 vue3 中使用 beforeRouteEnter

方法一、我们可以在设置路由的时候，使用beforeEnter方法拦截，即在router.js中：

{
	path: '/',
	name: 'home
	component: () => import('@/xxx.vue'),
	beforeEnter: (to, from) => {
		// 可以在定义路由的时候监听from和to
	}
}

登录后复制

方法二、我们还可以使用vue2的写法，使用选项式api，就可以使用beforeRouterEnter这个钩子了

<script>
export default {
	beforeRouteEnter(to, from) {
		console.log('before router enter', to, from)
	},
	mounted() {
		console.log('mounted')
	},
}

登录后复制

五、模拟登录注册案例

// 模拟是否登录（true为登录，false为未登录）
let token = true
router.beforeEach((to, from, next) => {
    // 判断有没有登录
    if (!token) {
    	// 如果没有登录，并且是跳转至登录页
        if (to.name == "Login") {
        	// 直接跳转
            next();
        } else {
        	// 否则直接强制跳转至登录页
            router.push('/login')
        }
    } else {
    	// 如果已经登录，并且不是跳转至登录页
        if (to.name !== "Login") {
        	// 直接跳转
            next();
        } else {
        	// 否则直接强制跳转至上一个页面
            router.push(from.path)
        }
    }
});

登录后复制

以上就是Vue3中的导航守卫如何使用的详细内容，更多请关注Work网其它相关文章！