Vue的路由动态重定向和导航守卫实例


Posted in Javascript onMarch 17, 2018

根据vue官方文档,对于重定向有详细的示例,但是关于使用方法动态重定向的描述却不多,重定向部分的描述如下:

重定向

重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b:

const router = new VueRouter({
 routes: [
 { path: '/a', redirect: '/b' }
 ]
})

重定向的目标也可以是一个命名的路由:

const router = new VueRouter({
 routes: [
 { path: '/a', redirect: { name: 'foo' }}
 ]
})

甚至是一个方法,动态返回重定向目标:

const router = new VueRouter({
 routes: [
 { path: '/a', redirect: to => {
  // 方法接收 目标路由 作为参数
  // return 重定向的 字符串路径/路径对象
 }}
 ]
})`这里写代码片`

关于动态重定向的示例如下:

{ path: '/dynamic-redirect/:id?',
  redirect: to => {
  const { hash, params, query } = to
  if (query.to === 'foo') {
   return { path: '/foo', query: null }
  }
  if (hash === '#baz') {
   return { name: 'baz', hash: '' }
  }
  if (params.id) {
   return '/with-params/:id'
  } else {
   return '/bar'
  }
  }
 }

首先参数解构,获取hash、params、query,然后根据获取值进行逻辑判断之后动态路由重定向。这里的return值是path值,而不是params值,必须是一个已经存在的path才能进行路由重定向。而且这个path不能使自身,因为作为一个重定向路由跳转到自身还要继续重定向,就会进行一个死循环。

现在需求如下:

为了防止用户随便改变路由参数而导致页面崩溃,需要进行路由重定向,将不符合要求的参数进行重定向到一个规范页面。比如用户点击按钮跳转/list/1但是用户自己将1进行改变传递不符合规范的参数给页面,希望能够在用户改变参数值后跳转到默认的规范页面

Vue的路由动态重定向和导航守卫实例

以上代码实现的效果是拿到路由参数,如果用户将页面参数改的不符合规范就进行路由重定向。使得页面可以获取正确参数值。现在的效果是如果用户输入/1则进入正常页面/list/1,输入/xsajsxoal、/5、/-5 等不符合规范的参数就会跳转进入/list/0。

虽然重定向的逻辑是没有问题的但问题依旧存在。那用户继续将/list/1改成/list/xsjknxkja怎么办呢?

可见重定向是不适合解决这个问题的。这时就用到了vue路由的导航守卫。导航守卫的实现方式如下:

{
  path: '/:type',
  name: 'normal',
  component: index,
  beforeEnter (to, from, next) {
  if (/^[0-3]$/.test(to.params.type)) {
   next()
  } else {
   next('/0')
  }
  }
 }

关于导航守卫官方文档描述如下:

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

记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫。

你可以使用 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。

根据需求并不需要使用到全局守卫,只需要使用到路由独享守卫,因此只需要在路由内添加beforeEnter然后判断是否符合参数规范,是的话用next() 进入下一个钩子,否则用next(‘/')跳转到目标地址。

以上这篇Vue的路由动态重定向和导航守卫实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js的写法基础分析
Jan 17 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
ajax如何实现页面局部跳转与结果返回
Aug 24 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
Oct 05 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
基于JSON数据格式详解
Aug 31 Javascript
JS实现的判断方法、变量是否存在功能示例
Mar 28 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
JS实现为动态创建的元素添加事件操作示例
Mar 17 #Javascript
对vue里函数的调用顺序介绍
Mar 17 #Javascript
基于vue2.0动态组件及render详解
Mar 17 #Javascript
Vue实现动态创建和删除数据的方法
Mar 17 #Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 #Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 #Javascript
解决vue页面DOM操作不生效的问题
Mar 17 #Javascript
You might like
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
PHP实现的函数重载功能示例
2018/08/03 PHP
PHP实现限制域名访问的实现代码(本地验证)
2020/09/13 PHP
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
javascript确认框的三种使用方法
2013/12/17 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
jQuery实现tag便签去重效果的方法
2015/01/20 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
nodejs接入阿里大鱼短信验证码的方法
2017/07/10 NodeJs
Nodejs Express 通过log4js写日志到Logstash(ELK)
2018/08/30 NodeJs
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
NodeJS有难度的面试题(能答对几个)
2019/10/09 NodeJs
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
[05:11]TI9战队采访——VIRTUSPRO
2019/08/22 DOTA
python3调用R的示例代码
2018/02/23 Python
Python cookbook(数据结构与算法)同时对数据做转换和换算处理操作示例
2018/03/23 Python
Python中字符串与编码示例代码
2019/05/20 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
Eyeko美国:屡获殊荣的睫毛膏、眼线笔和眉妆
2018/07/05 全球购物
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
制衣厂各岗位职责
2013/12/02 职场文书
继电保护工岗位职责
2014/01/05 职场文书
20岁生日感言
2014/01/13 职场文书
工商治理实习生的自我评价
2014/01/15 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
关于保护环境的标语
2014/06/09 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
CSS3 天气图标动画效果
2021/04/06 HTML / CSS