vue2.0 实现导航守卫（路由守卫）

路由跳转前做一些验证，比如登录验证，是网站中的普遍需求。

对此，vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫（navigation-guards）。

导航守卫（navigation-guards）这个名字，听起来怪怪的，但既然官方文档是这样翻译的，就姑且这么叫吧。

贴上文档地址：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

全局守卫

你可以使用 router.beforeEach 注册一个全局前置守卫：

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
 // ...
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

每个守卫方法接收三个参数：

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

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

next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。

next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。

next(\’/\’) 或者 next({ path: \’/\’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

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

确保要调用 next 方法，否则钩子就不会被 resolved。

下面写一个例子：

列举需要判断登录状态的“路由集合”，当跳转至集合中的路由时，如果“未登录状态”，则跳转到登录页面LoginPage；

当直接进入登录页面LoginPage时，如果“已登录状态”，则跳转到首页HomePage；

import Vue from \'vue\';
import Router from \'vue-router\';
import LoginPage from \'@/pages/login\';
import HomePage from \'@/pages/home\';
import GoodsListPage from \'@/pages/good-list\';
import GoodsDetailPage from \'@/pages/good-detail\';
import CartPage from \'@/pages/cart\';
import ProfilePage from \'@/pages/profile\';
Vue.use(Router)
const router = new Router({
 routes: [
 {
  path: \'/\', // 默认进入路由
  redirect: \'/home\' //重定向
 },
 {
  path: \'/login\',
  name: \'login\',
  component: LoginPage
 },
 {
  path: \'/home\',
  name: \'home\',
  component: HomePage
 },
 {
  path: \'/good-list\',
  name: \'good-list\',
  component: GoodsListPage
 },
 {
  path: \'/good-detail\',
  name: \'good-detail\',
  component: GoodsDetailPage
 },
 {
  path: \'/cart\',
  name: \'cart\',
  component: CartPage
 },
 {
  path: \'/profile\',
  name: \'profile\',
  component: ProfilePage
 },
 {
  path: \'**\', // 错误路由
  redirect: \'/home\' //重定向
 },
 ]
});
// 全局路由守卫
router.beforeEach((to, from, next) => {
 console.log(\'navigation-guards\');
 // to: Route: 即将要进入的目标 路由对象
 // from: Route: 当前导航正要离开的路由
 // next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
 const nextRoute = [\'home\', \'good-list\', \'good-detail\', \'cart\', \'profile\'];
 let isLogin = global.isLogin; // 是否登录
 // 未登录状态；当路由到nextRoute指定页时，跳转至login
 if (nextRoute.indexOf(to.name) >= 0) { 
 if (!isLogin) {
  console.log(\'what fuck\');
  router.push({ name: \'login\' })
 }
 }
 // 已登录状态；当路由到login时，跳转至home
 if (to.name === \'login\') {
 if (isLogin) {
  router.push({ name: \'home\' });
 }
 }
 next();
});
export default router;

以上所述是小编给大家介绍的vue2.0 实现导航守卫（路由守卫），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！