vue-router的导航守卫使用最新讲解

2024-09-29 16:49:00

前言

在浏览器中点击链接实现导航的方式，叫做声明式导航。例如：普通网页中点击<a>链接、vue项目中点击<router-link>都属于声明式导航。

在浏览器中调用API方法实现的导航方式，叫做编程式导航。例如：普通网页中调用loaction.href跳转到新页面的方式，属于编程式导航。

vue-router中编程式导航API

编程式路由导航作用就是不借助<router-link>实现路由跳转，让路由跳转更加灵活。

vue-router提供了许多编程式导航的API，其中最常见的导航API有以下几种：

1）this.$router.push('hash地址')

跳转到指定的 hash 地址，并增加一条历史记录。

2）this.$router.replace('hash地址')

跳转到指定的 hash 地址，并替换掉当前的历史记录。

3）this.$router.go(数值n)

调用this.$router.go()方法，可以在浏览历史中前进和后退。

在实际开发中，一般只会前进和后退一层页面。因此 vue-router 提供了如下两个便捷方法：

1）$router.back() 在历史记录中，后退到上一个页面。

2）$router.forward() 在历史记录中，前进到下一个页面。

这两个方法一般可以放在行内样式里面使用，更便捷一点，注意：行内样式里面就不必再写this了

导航守卫

导航守卫也叫路由守卫，可以控制路由的访问权限，示意图如下：

全局守卫

全局前置守卫：每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制，那么如何创建全局前置守卫呢？如下：

全局前置守卫的回调函数中接收3个形参，如上图所示，其作用为：

to：是将要访问的路由的信息对象

from：是将要离开的路由的信息对象

next：是一个函数，调用 next() 表示放行，允许这次路由导航

next函数的3种调用方式：如下图所示

控制后台主页的访问权限：

router.beforeEach(function (to, from, next) {
  if (to.path === '/main') {
    // 要访问后台主页，需要判断是否有token
    const token = localStorage.getItem('token')
    if (token) { // token值存在
      next()
    } else {
      // 没有登录，强制跳转到登录页
      next('/login')
    }
  } else {
    next() // 访问的不是后台主页，直接放行
  }
})

当然我们也可以通过全局前置守卫来进行权限的查看，案例如下：

// 全局前置守卫：初始化时、每次路由切换前执行
router.beforeEach((to, from, next) => {
  console.log('beforeEach', to, from)
  if (to.meta.isAuth) { // 判断当前路由是否需要进行权限控制
    if (localStorage.getItem('token') === 'key') { // 权限控制的具体规则
      next() // 放行
    } else {
      alert('暂无权限查看')
    }
  } else {
    next() // 放行
  }
})

全局后置守卫：全局后置守卫相对于前置守卫使用的次数相对较少，后置守卫一般使用在项目的title实时发送变化时来使用。

// 全局后置守卫，初始化时执行、每次路由切换后执行
router.afterEach((to, from) => {
  console.log('afterEach', to, from)
  if (to.meta.title) {
    document.title = to.meta.title // 修改网页的title
  } else {
    document.title = 'process'
  }
})

独享路由守卫

顾名思义独享路由守卫就是某一个路由独享的，和其他路由没关系。如下：

beforeEnter (to, from, next) {
  console.log('beforeEach', to, from)
  if (to.meta.isAuth) { // 判断当前路由是否需要进行权限控制
    if (localStorage.getItem('admin') === 'admin123') { // 权限控制的具体规则
      next() // 放行
    } else {
      alert('暂无权限查看')
    }
  } else {
    next() // 放行
  }
}

组件路由守卫

顾名思义是在组件内部使用的守卫。如下：使用方式和上文一样，这里不在赘述。

// 通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) { },
// 通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) { }

当然，作者讲解的也不是太全面，如果你想更细致的了解vue-router的导航守卫，推荐看一下官方文档对导航守卫的说明：导航守卫官方说明。

到此这篇关于vue-router的导航守卫使用讲解的文章就介绍到这了,更多相关vue-router的导航守卫内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

详解vue-router导航守卫

当做Vue-cli项目的时候需要在路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-router 提供的 beforeEach可以方便地实现全局导航守卫(navigation-guards).组件内部的导航守卫函数使用相同,只是函数名称不同(beforeRouteEnter .beforeRouteUpdate(2.2 新增) .beforeRouteLeave). 钩子(Hook),早期编程可能有个概念叫句柄,不知道将两者类比而且强行归为一类是不是合适.钩子的用处是在某个
vue-router 实现导航守卫（路由卫士）的实例代码

导航守卫导航守卫即是在路由跳转的时候,根据vue-router提供的导航守卫主要用来通过跳转或取消参数或查询的改变并不会出触发进入/离开的导航守卫路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-route 提供的 beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards). 导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧. 贴上文档地址:https://router
详解vue-router的导航钩子(导航守卫)

在做vue项目的时候,要求用户在页面访问前先登录,或在离开页面前发出提醒.vue官方提供的路由管理器 vue-router 提供的导航钩子,通过跳转或取消的方式守卫导航.以下总结了路由钩子函数的使用方法和一些使用场景. 一.全局守卫 router.beforeEach 路由改变前的钩子 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { ... ... }) 其中: to:将要访问的路径 fr
vue-router的导航守卫使用最新讲解

目录前言 vue-router中编程式导航API 导航守卫全局守卫独享路由守卫组件路由守卫前言在浏览器中点击链接实现导航的方式,叫做声明式导航.例如:普通网页中点击<a>链接.vue项目中点击<router-link>都属于声明式导航. 在浏览器中调用API方法实现的导航方式,叫做编程式导航.例如:普通网页中调用loaction.href跳转到新页面的方式,属于编程式导航. vue-router中编程式导航API 编程式路由导航作用就是不借助<router-lin
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法

#在切换路由时,组件会被复用,不过,这也意味着组件的生命周期钩子不会再被调用. 解决办法有两种,1简单地 watch (监测变化) $route 对象: const User = { template: '...', watch: { '$route' (to, from) { // 对路由变化作出响应... } } } 2.使用 2.2 中引入的 beforeRouteUpdate 导航守卫: const User = { template: '...', beforeRouteUpdate
Vue Router4路由导航守卫实例全面解析

目录前言一.什么是导航守卫二.全局前置守卫可选的第三个参数 next 三.全局解析守卫四.全局后置钩子五.路由独享的守卫六.组件内的守卫可用的配置 API 使用组合 API 七.完整的导航解析流程前言在写Vue项目的时候,少不了使用路由vue-router,而路由守卫是vue-router中一个非常重要的概念,也是非常重要的技巧.它能够很好的帮助开发者“监视”每一个跳转的路由. 一.什么是导航守卫正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码

有这样一个场景:如果你在登录之前输入了http://localhost:8080/oauth2-mgm-app/#/userManage,想进入userManage页面,但是由于没有登录,系统是不会让你进入这个页面,之后会被定向到login页面.但是在登录之后,认为你有这个权限了,就需要重新定向到userManage页面.大致流程图如图1所示: 图1 登录后跳转到未登录前指定页面流程图在vue-route的官方文档里其实有给到过这个demo,官方文档链接在此:https://router.vu
vue中的导航守卫使用及说明

目录导航守卫全局守卫独享守卫组件内守卫 vue导航守卫有哪些路由的钩子函数有六个全局路由钩子函数路由内的钩子函数组件内的钩子函数总结导航守卫作用:对路由进行权限控制分类:全局守卫.独享守卫.组件内守卫全局守卫 const router = new VueRouter({ routes: [ { path: '/home', component: Home, meta: { isAuth: false }, // 不需要进行权限控制 }, { path: '/user',
vue中全局路由守卫中替代this操作(this.$store/this.$vux)

全局路由守卫this.$vux.loading.hide()报错,访问不到this 解决办法申明变量代替this main.js文件方法 router.beforeEach((to, from, next) => { if(vue){ vue.$vux.loading.hide() }else{ } next() }) let vue = new Vue({ el: '#app', router, store, components: { App }, template: '<App/>
Vue的路由动态重定向和导航守卫实例

根据vue官方文档,对于重定向有详细的示例,但是关于使用方法动态重定向的描述却不多,重定向部分的描述如下: 重定向重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b: const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ] }) 重定向的目标也可以是一个命名的路由: const router = new VueRouter({ routes: [ { path: '/a', r
Vue Router 实现动态路由和常见问题及解决方法

个人理解:动态路由不同于常见的静态路由,可以根据不同的「因素」而改变站点路由列表.常见的动态路由大都是用来实现:多用户权限系统不同用户展示不同导航菜单. 如何利用Vue Router 实现动态路由 Vue项目实现动态路由的方式大体可分为两种: 前端将全部路由规定好,登录时根据用户角色权限来动态展示路由: 路由存储在数据库中,前端通过接口获取当前用户对应路由列表并进行渲染: 第一种方式在很多Vue UI Admin上都实现了,可以去读一下他们的源码理解具体的实现思路,这里就不过多展开.第二种方式现
Vue2.x配置路由导航守卫实现用户登录和退出

目录前言一.配置路由导航守卫 1. 全局导航守卫 2. 局部导航守卫二.用户登录 1. axios配置 2. 用户登录代码三.用户退出 1. 实现代码总结前言之前在Vue的学习中通过路由导航守卫控制实现了用户登录模块的功能,现在再次做项目时又要通过Vue配置路由导航守卫来实现相同的功能,在此将实现过程进行记录与总结(本文基于Vue2.x进行实现) 提示:以下是本篇文章正文内容,下面案例可供参考一.配置路由导航守卫 1. 全局导航守卫如果项目中只有后台的情况,在Vue中配置全局导
Vue声明式导航与编程式导航及导航守卫和axios拦截器全面详细讲解

目录一.声明式导航&编程式导航二.导航守卫三.axios拦截器一.声明式导航&编程式导航 1. 声明式导航:以超链接方式实现的页面跳转,就是声明式导航 < a href=‘url’> 链接文本或图像 < /a > < router-link to=‘url’ > 链接文本或图像 < /router-link > 2. 编程式导航:通过javascript提供的api方法实现页面的跳转,就是编程式导航 location.href = ‘