vue router导航守卫（router.beforeEach()）的使用详解

导航守卫

导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。（记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route对象来应对这些变化，或使用beforeRouteUpdate的组件内守卫。）

好久没写一些东西了，总是感觉有啥缺少的。~~~~恰好碰到最近在写一个移动端项目，遇到了如何使同一个链接在不同条件下跳转到不同路由组件问题，譬如大家经常看到手机中没登录跳转登录页，登陆后跳转个人信息页等。废话不多说了，直接上图：

这是没登录状态，点击下面mine按钮跳转至登录页

这个是我登录了自己的账号后，再次点击mine按钮会跳转至个人信息页面

好了，看到了这个效果今天咱们来实现下

实现方法

我们点击下面mine按钮其实是路由跳转，所以我们需要在跳转路由之前做一个判断，根据不同的条件让这个链接跳转到不同路由。这时候我们vue-router中的导航守卫就闪亮登场了~~~

先看官方文档： https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

官方文档中说了很清楚，我们可以使用 router.beforeEach 注册一个全局前置守卫：

在router文件夹下index.js中添加以下代码

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

这里对router.beforeEach方法的每个参数做简要的解释。

“to”: 即将要进入的目标 路由对象;（这个对象中包含name，params，meta等属性）

"from": 当前导航正要离开的路由对象；（这个对象中包含name，params，meta等属性）

“next”: Function: 确保要调用 next 方法，否则钩子就不会被 resolved。这个当中还可以传一些参数，具体可以看官方文档。

我们在代码中做了一个判断 if (to.name === 'Mine') ,也就是说当我们要跳转的路由对象是Mine时候，才会进入导航守卫中判断条件，当我们点击其他链接跳转其他页正常，因为我们只有mine按钮链接对应的情况有两种。

// 登陆/注册就去用户详情页
 if (localStorage.getItem('userID')) {
  router.replace('/myinfo')
 }

这段代码就是判断当用户点击了mine，我们需要判断用户是否是登录还是未登录了。因为之前用户登录的时候我将用户的userID保存到了localStorage中，所以只需要判断localStorage中是否有用户的userID，来判断用户是否登录。这里情况两个，未登录去登录页，登录去个人信息页

好了，通过简单的配置使用，我们就可以愉快的根据不同的情况来实现路由跳转不同组件了~

哈哈，很简单吧，欢迎大家一起交流学习前端知识。我在GitHub上等你一起呦
~

说明

文章因为是在工作之余写的，可能时间匆忙，有些错别字或者语法等低级错误，欢迎留言指出，谢谢。。

同时在GitHub上也可以一起交流交流~~~

GitHub 走你

总结

以上所述是小编给大家介绍的vue router导航守卫（router.beforeEach()）的使用详解,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • vue-router 实现导航守卫（路由卫士）的实例代码

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

  • 详解vue-router导航守卫

    详解vue-router导航守卫

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

  • VueRouter导航守卫用法详解

    VueRouter导航守卫用法详解

    简介 主要用来通过跳转或取消的方式守卫导航. 例如判断登录信息:没登录全部跳到登录页.判断必要操作是否进行没进行的话中断跳转. 分为三大类:全局守卫.路由守卫.组件守卫 全局守卫 beforeEach beforeResolve afterEach 路由守卫 beforeEnter 组件守卫 beforeRouteEnter // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 `this` // 因为当守卫执行前,组件实例还没被创建 虽然无法直接获取组件实力 但是

  • 关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法

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

  • Vue路由钩子之afterEach beforeEach的区别详解

    vue-router作为vue里面最基础的服务,学习一段时间,对遇到的需求进行一些总结 使用vue-cli作为开发前提 vue-router已经配置好了 路由写法 routes: [ { path: '/cart', name: 'cart', component: cart, meta :{ title: "购物车"} //用于给定网页名 } ] vue-router 的路由跳转的方法 第一种 : 编程式的导航 <router-link to="/" tag

  • vue router导航守卫（router.beforeEach()）的使用详解

    导航守卫 导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的.(记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察$route对象来应对这些变化,或使用beforeRouteUpdate的组件内守卫.) 好久没写一些东西了,总是感觉有啥缺少的.~~~~恰好碰到最近在写一个移动端项目,遇到了如何使同一个链接在不同条件下跳转到不同路由组件问题,譬如大家经常看到手机中没登录跳转登录页,登陆后跳转个人信息页等.废话不多说了

  • 快速理解Vue路由导航守卫

    目录 一.全局守卫 1.全局前置守卫 2.全局解析守卫 3.全局后置钩子 三.路由独享的守卫 四.组件内的守卫 五.一个完整的导航解析流程 概念: "导航"表示路由正在发生变化 vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程 中:全局的, 单个路由独享的, 或者组件级的. 导航守卫:包括全局导航守卫和局部导航守卫 一.全局守卫 vue-router全局有三个守卫 router.beforeEach :全局前置守卫,进入路由之前 ro

  • vue缓存之keep-alive的理解和应用详解

    官方解释: <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中. 当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行. 主要用于保留组件状态或避免重新渲染. keep-alive 是 Vue 的内置组件,

  • vue项目添加多页面配置的步骤详解

    公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置,随着需求的不断增加,发现有必要使用多页面配置.看了很多 vue多页面配置 的文章,基本都是在初始化时就配置了多页面.而且如果使用这些实现,需要调整当前项目的目录结构,这点也是不能接受的. 最后,参考这些文章,在不调整当前项目目录结构实现了多页面的配置的添加.这里做下记录.总结,方便以后复用.如果还能有幸帮助到有同样需求的童鞋的话,那就更好了. 实现步骤 1.添加新增入口相关文件; 2.使用变量维护多入口: 3.开发环境读

  • vue中datepicker的使用教程实例代码详解

    写这个文章主要是记录下用法,官网已经说的很详细了 npm install vue-datepicker --save html代码 <myDatepicker :date="startTime" :option="multiOption" :limit="limit"></myDatepicker> <myDatepicker :date="endtime" :option="timeo

  • vue路由传参三种基本方式详解

    这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> methods: 方案一: getDescribe(id) { // 直接调用$r

  • vue cli4下环境变量和模式示例详解

    本文介绍了vue cli4下环境变量和模式示例详解,分享给大家,具体如下: 官方文档 环境变量 一个环境变量文件只包含环境变量的键值对: NODE_ENV=development VUE_APP_BASE_URL=http://127.0.0.1:8080/ 注意: NODE_ENV - 是 "development"."production" ."test"或者自定义的值.具体的值取决于应用运行的模式 BASE_URL - 会和 vue.con

  • Vue如何防止按钮重复点击方案详解

    目录 前言 目的 文件结构 实现 请求拦截 响应拦截 取消重复发送请求 调用 前言 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. axios 是目前最优秀的 HTTP 请求库之一, 我们封装 axios 请求也是为了让代码看的更加清晰, 后期好维护. 目的 实现请求拦截 实现响应拦截 常见错误处理 不能请求头设置 api 集中式管理 (取消重复请求,重复发送请求, 请求缓存等情况均还未实现) 文件结构 实现 index.js内代码如下: 引入

  • vue从使用到源码实现教程详解

    vue从使用到源码实现教程详解

    搭建环境 项目github地址 项目中涉及了json-server模拟get请求,用了vue-router: 关于Vue生命周期以及vue-router钩子函数详解 生命周期 1.0版本 1.哪些生命周期接口 init Created beforeCompile Compiled Ready Attatched Detached beforeDestory destoryed 2.执行顺序 1. 不具有keep-alive 进入: init->create->beforeCompile->

随机推荐