vue-router的导航钩子

在做vue项目的时候，要求用户在页面访问前先登录，或在离开页面前发出提醒。

一、全局守卫

router.beforeEach 路由改变前的钩子

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

其中：

to: 将要访问的路劲

from: 导航正要离开的目标路由

next: 是一个函数，表示放行

next(): 如果一起正常，则调用该方法进入下一个钩子；

next(false): 中断当前导航，即路由地址不发生变化

next('/xxx') 或next({path: '/xxx'}): 强制跳转到指定路径；

next(error): 如果传入的是一个errror 实例，则导航会被终端且该错误会被传递给router.onError() 注册过得回调

使用：

使用该函数，一定要调用next(), 否则钩子函数不能resovle；
该方法比较常用于验证用户访问权限比如: 一个系统需要先验证用户是否登录，如果登陆了就可以访问，否则直接跳转到登录页面

import Vue from 'vue'
import VueRouter from 'vue-router'
import {getToken} from '@Uilts/session.utils'  // 登录用户的token
import Login form '../pages/Login.vue'         // 引入登录页
const Home =（） => import('../pages/Home.vue')   // 引入首页

Vue.use(VueRouter)   // 全局注入router

// 配置路由参数
const routes = {
  {path: '/Login', name: 'Login',  component: Login}
  {path:'/home',  name: 'home', component: Home}
}


const router = new VueRouter({
    routes
})

// 全局挂载路由导航守卫： 验证用户是否登录
router.beforeEach((to, from, next) => {
    if (to.name !== 'login' && !getToken())  next('/login')   // 如果用户不是访问登录页而且没有登录，则强制跳转到登录页
    else next()
})

export default router

router.beforeResolve 在导航被确认之前，同事在所有组件内守卫和异步路由组件被解析之后，该钩子函数被调用
router.afterEach 路由改变后的钩子

router.afterEach((to,form) => {

})

该方法同全局全局前置守卫router.beforeEach 不用的是少了next() 函数，也不会改变导航本身。

使用场景：

· 切换路由，将页面的滚动位置返回到顶部

例如：一个页面比较长，当滚动到某个位置后期切换路由，这时跳转的也没滚动条默认是前一个页面离开时停留的位置，乐意通过该钩子函数将滚动条位置重置

// 切换路由，页面返回顶部
router.afterEach((to, from) => {
    window.scrollTo(0,0)
})

二、路由独享的守卫

beforeEnter 对某个路由的单独守卫

const routers = [
    {path: 'login', name: 'login', component: Login},
    {
        path: '/home',
        name: 'home',
        component: Home,
        beforeEnter: (to, from, next) => {
       
        }
    }
   
]

const router = new VueRouter({
    routers

})

使用：

该方法的参数使用同全局的全职守卫router.beforeEach 是一样的
在路由配置上直接定义
例如：根据登录用户的不同角色，展示不同的模块；或者给指定路由组件单独添加动画

import Vue from 'vue'
import VueRouter from 'vue-router'
import { getUserRole } from '@Utils/session.utils'   // 登录用户的角色

const UserCenter = （） => import('../pages/UserCenter.vue')

const routes = [
    {
       path:  '/usercenter',
       name: 'usercenter',
       component: UserCenter,
      beforeEnter: (to, from, next) => {
           if(getUserRole() === 'admin')  next ('/admincenter')
           else next()  
       }
    }
]

vue-router 是vue的路由管理器，让构建页面变得易如反掌

<router-link> 组件支持用户在具体路由功能应用中点击导航，通过to属性指定目标地址

<router-view> 渲染路径匹配到的视图组件

<keep-alive> 组件是一个用来缓存的组件

router.beforeEach

router.afterEach

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

from: Router：导航正要离开的路由

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

posted on 2021-04-19 16:44 咏竹莉阅读(204) 评论(0) 收藏举报

一、 全局守卫

二、 路由独享的守卫

一、全局守卫

二、路由独享的守卫