当涉及到Vue路由时,导航守卫是一项非常有用的功能。导航守卫允许你在路由导航过程中执行一些操作,例如验证用户权限、重定向或取消导航等,导航守卫主要分为三种:全局导航守卫、独享导航守卫、组件内导航守卫。
router.beforeEach((to, from, next) => { let token = userStore.token; // 如果用户已登录 if(token) { // 访问登录页则跳回首页 if(to.path == "/login"){ next({path: "/"}); } else { // 如果访问其他页面则放行 next(); } } else { // 如果用户未登录 if(to.path == "/login"){ next(); } else { // 如果访问其他页面则返回登录界面 next({path: "/login"}); } } })三个参数的含义:
router.beforeResolve((to, from, next) => { // 在这里执行一些操作,例如加载数据 fetchData().then(() => { next(); }); });Vue-router的官网写道:router.beforeResolve是获取数据或执行任何其他操作(如果用户无法进入页面时你希望避免执行的操作)的理想位置。
router.afterEach((to, from) => { // 堆代码 duidaima.com // 在这里执行一些操作,例如记录页面浏览历史 trackPageView(to.path); });比如说我们就可以利用前置守卫和后置守卫制作一个进度条,当然我们还需要引入第三方库及其样式,这样项目上方会出现进度条。
import nprogress from "nprogress"; import "nprogress/nprogress.css"; import router from "./router"; router.beforeEach((to, from, next) => { nprogress.start(); next(); }) router.afterEach((to, from) => { nprogress.done(); })三、独享导航守卫
const routes = [ { path: '/home', component: Home, beforeEnter: (to, from, next) => { // 在进入路由之前执行一些操作 if (isLoggedIn()) { // 用户已登录,允许访问路由 next(); } else { // 用户未登录,重定向到登录页面 next('/login'); } } }, // 其他路由配置... ]通过使用独享导航守卫,我们可以在路由级别上对访问权限进行一定的控制。
const UserDetails = { template: `...`, beforeRouteEnter(to, from) { // 在渲染该组件的对应路由被验证前调用 // 不能获取组件实例 `this` ! // 因为当守卫执行时,组件实例还没被创建! }, beforeRouteUpdate(to, from) { // 在当前路由改变,但是该组件被复用时调用 // 举例来说,对于一个带有动态参数的路径 `/users/:id`,在 `/users/1` 和 `/users/2` 之间跳转的时候, // 由于会渲染同样的 `UserDetails` 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 因为在这种情况发生的时候,组件已经挂载好了,导航守卫可以访问组件实例 `this` }, beforeRouteLeave(to, from) { // 在导航离开渲染该组件的对应路由时调用 // 与 `beforeRouteUpdate` 一样,它可以访问组件实例 `this` }, }在beforeRouteEnter守卫中,可以通过传递一个回调函数给next方法来访问组件实例。这个回调函数会在路由确认之后被调用,此时组件实例已经被创建。回调函数的参数就是组件实例,因此可以通过这个参数访问组件实例的方法和属性。
export default { beforeRouteEnter(to, from, next) { next(vm => { // 在进入组件之后执行一些操作 // 可以访问组件实例的this上下文 vm.doSomething(); }); }, beforeRouteUpdate(to, from, next) { // 在这里执行一些操作,例如重新加载数据 fetchData().then(() => { next(); }); }, beforeRouteLeave(to, from, next) { // 堆代码 duidaima.com // 在这里执行一些操作,例如提示用户保存未保存的数据 if (hasUnsavedChanges) { if (confirm('你有未保存的数据,确定要离开吗?')) { next(); } else { next(false); } } else { next(); } }, };
Vue导航守卫是Vue Router提供的一种机制,用于在路由导航过程中执行一些操作。全局守卫可以在整个应用程序的路由导航过程中被调用,而路由独享守卫只对特定的路由生效。通过使用导航守卫,我们可以实现权限验证、数据预加载等功能,提升用户体验和应用程序的安全性。