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 相关文章推荐
JavaScript实际应用:innerHTMl和确认提示的使用
Jun 22 Javascript
把jquery 的dialog和ztree结合实现步骤
Aug 02 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
js实现自定义进度条效果
Mar 15 Javascript
微信小程序仿美团城市选择
Jun 06 Javascript
VUE 全局变量的几种实现方式
Aug 22 Javascript
vue中 v-for循环的用法详解
Feb 19 Javascript
ES6函数和数组用法实例分析
May 23 Javascript
vue组件暴露和.js文件暴露接口操作
Aug 11 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 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
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
php7性能提升的原因详解
2019/10/13 PHP
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
Ionic快速安装教程
2016/06/03 Javascript
图文详解JavaScript的原型对象及原型链
2016/08/02 Javascript
canvas绘制一个常用的emoji表情
2017/03/30 Javascript
jQuery插件开发发送短信倒计时功能代码
2017/05/09 jQuery
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
Python正则表达式匹配ip地址实例
2014/10/09 Python
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
3个用于数据科学的顶级Python库
2018/09/29 Python
Python爬取视频(其实是一篇福利)过程解析
2019/08/01 Python
python 负数取模运算实例
2020/06/03 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
python 用opencv实现图像修复和图像金字塔
2020/11/27 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
css3实现图片遮罩效果鼠标hover以后出现文字
2013/11/05 HTML / CSS
CSS实现定位元素居中的方法
2015/06/23 HTML / CSS
网络方面基础面试题
2012/11/16 面试题
投资合作协议书
2014/04/17 职场文书
债务授权委托书范本
2014/10/17 职场文书
个人工作总结范文2014
2014/11/07 职场文书
个人党性分析材料
2014/12/19 职场文书
体育教师个人工作总结
2015/02/09 职场文书