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 相关文章推荐
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
详解node如何让一个端口同时支持https与http
Jul 04 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
原生JS实现ajax与ajax的跨域请求实例
Dec 01 Javascript
JS关于刷新页面的相关总结
May 09 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 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
德生PL330的评价与改造
2021/03/02 无线电
一个用于MySQL的PHP XML类
2006/10/09 PHP
PHP array 的加法操作代码
2010/07/24 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
JavaScript 三种创建对象的方法
2009/10/16 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
浅谈jQuery中 wrap() wrapAll() 与 wrapInner()的差异
2014/11/12 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
2018/08/04 Javascript
记React connect的几种写法(小结)
2018/09/18 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
JS 实现发送短信验证码的“59秒后重新发送验证短信”功能
2019/08/23 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
Go语言基于Socket编写服务器端与客户端通信的实例
2016/02/19 Python
简单了解Django ContentType内置组件
2019/07/23 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
个人求职信范文分享
2013/12/13 职场文书
公证书样本
2014/04/10 职场文书
就业协议书范本
2014/04/11 职场文书
保护地球的标语
2014/06/17 职场文书
商务经理岗位职责
2014/08/03 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
Redis性能监控的实现
2021/07/09 Redis
Python使用永中文档转换服务
2022/05/06 Python