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 相关文章推荐
页面只能打开一次Cooike如何实现
Dec 04 Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
详解JavaScript中的异常处理方法
Jun 16 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
javascript self对象使用详解
Oct 18 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
VUE 组件转换为微信小程序组件的方法
Nov 06 Javascript
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 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
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
PHP实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
js 设置选中行的样式的实现代码
2010/05/24 Javascript
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
浅谈javascript原型链与继承
2015/07/13 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
深入理解vue.js中$watch的oldvalue与newValue
2017/08/07 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
详解html-webpack-plugin用法全解
2018/01/22 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
python实现获取序列中最小的几个元素
2014/09/25 Python
Python 抓取动态网页内容方案详解
2014/12/25 Python
Python读取网页内容的方法
2015/07/30 Python
Python cx_freeze打包工具处理问题思路及解决办法
2016/02/13 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
keras 权重保存和权重载入方式
2020/05/21 Python
简单了解Django项目应用创建过程
2020/07/06 Python
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
C#怎么让一个窗口居中显示?
2015/10/20 面试题
Ruby如何实现动态方法调用
2012/11/18 面试题
文秘应届生求职信
2014/07/05 职场文书
小学生校园广播稿
2014/09/28 职场文书
民间个人借款协议书
2014/09/30 职场文书
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android
【js设计模式】SOLID五大设计原则
2022/03/24 Javascript
Java 超详细讲解数据结构中的堆的应用
2022/04/02 Java/Android