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 相关文章推荐
ext监听事件方法[初级篇]
Apr 27 Javascript
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
javascript限制文本框输入值类型的方法
May 07 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
获取IE浏览器Cookie信息的方法
Jan 23 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
Sep 25 Javascript
webpack打包多页面的方法
Nov 30 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 Javascript
JS删除对象中某一属性案例详解
Sep 08 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
PHP4实际应用经验篇(8)
2006/10/09 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
Laravel使用RabbitMQ的方法示例
2019/06/18 PHP
jQuery DOM操作小结与实例
2010/01/07 Javascript
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
js实现交换运动效果的方法
2015/04/10 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
JQuery复选框全选效果如何实现
2020/05/08 jQuery
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
[04:38]完美世界携手游戏风云打造 卡尔工作室饰品系统篇
2013/04/25 DOTA
python处理PHP数组文本文件实例
2014/09/18 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
python3.0 模拟用户登录,三次错误锁定的实例
2017/11/02 Python
python爬取内容存入Excel实例
2019/02/20 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
电气工程及其自动化专业求职信
2014/06/23 职场文书
工厂标语大全
2014/10/06 职场文书
司法局群众路线教育实践活动整改措施思想汇报
2014/10/13 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
五一晚会主持词
2015/07/01 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫