当前位置:首页 > xiaomi WIFI设置 > 正文内容

vue怎么做路由拦截

秋天2023年03月01日 15:30:11xiaomi WIFI设置352

当朋友们看到这个文章时想必是想要了解vue怎么做路由拦截相关的知识,这里同时多从个角度为大家介绍vue拦截路由不让跳转相应的内容。

本文内容目录一览:

Vue,路由拦截,弹窗提示

假设有这样的需求,点击这个“私密”,进不去这个组件页,Vue-router会进行拦截,然后弹窗提示信息。

这种情况,方案有好几种:全局守卫、路由独享守卫、组件内守卫均可实现

比如使用组件内守卫:

但是, 某天我觉得浏览器的原生弹窗太丑了,我想 自定义一个弹窗 ,不用 window.alert()

于是开开心心的去自行封装一个弹窗组件了(过程先忽略)

投入使用:

结果报错。。

查了下文档,原来,在beforeRouterEnter 之前,此时的 this 是 undefined,并不是Vue实例对象。。因为当守卫执行前,组件实例还没被创建;

但是可以通过 next 传入回调函数获取到 Vue 组件实例

但是, next() 传入了回调函数,就不能传 false 进行拦截了。。。

利用 Vue.extend() 构造出一个实例,然后手动挂载

先把刚刚封装的弹窗组件放到一个Modal(名字随便)文件夹下,里面再创建文件index.js

然后到 main.js 中导入路由和这个插件即可食用了

但是还是有问题,因为当挂在完成的时候,还没有把DOM添加到页面上,所以无法使用 进入时候的过渡动画transition,因为当挂载结束,过渡动画也结束了。此时还没有添加到页面。。

vue中怎样实现 路由拦截器

路由拦截器就是路由守卫,分为全局守卫和局部守卫

全局守卫写在路由定义的文件里面,每当路由切换就会执行

// 进入页面之前执行

router.beforeEach((to, from, next) = {

  // ...

  })

// 进入页面之后执行

router.afterEach((to, from) = {

  // ...

  })

局部守卫写在vue组件里面,只对当前组件生效,和vue生命周期函数写法一样

beforeRouteEnter (to, from, next) {

    // 在渲染该组件的对应路由被 confirm 前调用

    // 不!能!获取组件实例 `this`

    // 因为当守卫执行前,组件实例还没被创建

  },

  beforeRouteUpdate (to, from, next) {

    // 在当前路由改变,但是该组件被复用时调用

    // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,

    // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

    // 可以访问组件实例 `this`

  },

  beforeRouteLeave (to, from, next) {

    // 导航离开该组件的对应路由时调用

    // 可以访问组件实例 `this`

  }

更多信息参考vue-router官方文档

vue路由拦截方法

在 src 目录下创建一个 interceptors 文件夹,

interceptors 文件夹下创建一个 index.js 文件,用于路由拦截的代码编辑。

全局引入 interceptors /index.js

在 main.js 中引入 interceptor

编辑 interceptors

引入 aixos,router

是给路由设置的,一定少不了 router,请求拦截的,少不了 axios

import axios from 'axios'

import Router from 'router'

代码编写

编写 发送与相应

axios.interceptors.request.use

axios.interceptors.response.use

以上就是vue怎么做路由拦截的全部内容了,文章比较长感谢您的耐心阅读,希望能帮到您,

扫描二维码推送至手机访问。

版权声明:本文由路由设置网发布,如需转载请注明出处。

本文链接:https://www.shoulian.org/luyou/post/10418.html

“vue怎么做路由拦截” 的相关文章

路由与交换e口配置

路由与交换e口配置

有很多朋友不知道路由与交换e口配置要如何操作,今天为大家整理了很多路由交换dr相关的答案,组成一篇内容丰富的文章,希望能到您 本文内容目录一览: 1、交换机和路由器一起用怎么配置 2、请问AR1220路由器的g口配置成功,但是e口配置不了ip是什么原因? 3、路由器s0和e0接口的ip地址分...

水星路由器登陆

水星路由器登陆

针对水星路由器登陆这个问题,本文将综合不同朋友对这个水星路由器登录网址melogincn的知识为大家一起来解答,希望能帮到大家 本文内容目录一览: 1、mercury无线路由器登录网址是多少? 2、水星路由器登录地址是什么? 3、水星路由器登录入口是多少? mercury无线路由器登录网址...

路由器浏览网页不全

路由器浏览网页不全

今天给各位分享路由器浏览网页不全的知识,其中也会对路由器有些网页打不开怎么回事进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站 本文内容目录一览: 1、无线路由器上网部分网页无法显示,怎么回事! 2、电脑路由器网页显示不全 3、路由器管理页面显示不全怎么办 无线路由器上网部分网页无...

青海千兆路由器设计

青海千兆路由器设计

当朋友们看到这个文章时想必是想要了解青海千兆路由器设计相关的知识,这里同时多从个角度为大家介绍千兆路由器参数标准相应的内容。 本文内容目录一览: 1、千兆路由器推荐 2、三大千兆电竞路由器横评,极限穿墙性能最强的竟是它! 3、青海广电宽带与TP-LINK无线路由器如何设置 千兆路由器推荐...

路由器没有s口

路由器没有s口

针对路由器没有s口这个问题,本文将综合不同朋友对这个路由器没有接口的知识为大家一起来解答,希望能帮到大家 本文内容目录一览: 1、ensp路由器添加serial线怎么没有serial口 2、路由器没有u s b接口怎配对w i f i放大配 3、路由器交换机上的S口、E口还有Fa口有什么区别...

小米路由刷网心云

小米路由刷网心云

今天和朋友们分享小米路由刷网心云相关的知识,相信大家通过本文介绍也能对刷小米路由器有自已的收获和理解。自己轻松搞问题。本文内容目录一览: 1、小米路由器3怎么刷机 2、小米路由器如何刷机 3、小米路由器hd刷openwrt硬盘使用 4、小米路由2怎么刷ssr 5、路由宝能刷网心云吗...