Vue Router的进阶使用

一、路由守卫

1. 路由守卫是什么

• 简单来说，导航守卫就是路由跳转前、中、后过程中的一些钩子函数，这个函数能让你操作一些其他的事儿，这就是导航守卫。
• 官方解释，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
• 应用场景举例：路由页面跳转时候进行登陆验证、路由跳转判断。

2.路由守卫分类

路由守卫分为：全局的、单个路由独享、组件内的三种：

• 全局守卫包括：router.beforeEach（是全局前置守卫）、router.beforeResolve（是全局解析守卫）、router.afterEach（是全局后置钩子）
• 单个路由独享的导航守卫：在路由配置上直接定义 beforeEnter 守卫
• 组件内守卫包括：在组件内定义路由的导航守卫，有beforeRouteEnter 、beforeRouteUpdate 、beforeRouteLeave

2.1 全局前置守卫

• 使用 router.beforeEach 注册一个全局前置守卫，所有配置路由的组件都会触发：

const router = createRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
  // 返回 false 以取消导航
  return false
})

• to：目标路由对象；

• from：即将要离开的路由对象；

• next：一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

  • next(): 进行管道中的下一个钩子。

  • next(false): 中断当前的导航。

  • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

  • next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

 示例：

// 登陆验证,成功则跳转到目标页面，不成功则返回登录页面
router.beforeEach((to, from, next) => {
  (isLogin || to.name === "Login") ? next() : next({ name: 'Login'});
})

2.2 路由独享守卫

• 直接在路由配置上定义 beforeEnter 守卫：

const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from, next) => {
      // ...
    },
  },
]

示例：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import(/* webpackChunkName: "about" */ '../views/login/Login.vue'),
    // 登录成功后，当想再次访问登录页面时，会直接跳转到首页
    beforeEnter: (to, from, next) => {
      const { isLogin } = localStorage;
      isLogin ? next({ name: 'Home' }) : next();
    }
  }
]

二、在组合式API中的使用

1. 在 setup 中访问路由和当前路由

useRoute：返回当前路由地址。相当于在模板使用 $route。

useRouter：返回 router 实例。相当于在模板中使用 $router。

2. Router 方法

2.1 push

• 导航到一个新的路由地址。

参数	类型	描述
to	RouteLocationRaw	要导航到的路由地址

// 示例
push({ name: "Home" });