跳到主要内容

Nuxt在axios等独立插件中使用路由

W

WaynePeng

https://juejin.im/post/5c0e5bf8e51d457f895a9c65

2019年07月28日 2,386 次阅读
本页目录

未测试:


最近在开发一个网站,用的nuxt搭建的框架,因为需要在请求token过期之后提示用户重新登录并且返回登录页面,但是在axios的配置文件中使用router.push一直报错,都准备放弃使用公众组件去进行路由跳转了,但是天无绝人之路,最终在官方文档中找到了redirect,具体操作如下:

  1. 在axios的js文件中添加默认的方法,并且获取redirect,并且使用使用myredirect将redirect储存起来
let myredirect;
export default function ({redirect }) {
  myredirect = redirect;
}
复制代码
  1. 在需要使用路由跳转的地方进行跳转(此处在判断token过期时跳转)
if (error.message.toString().slice(-3) === '401') {
    Vue.prototype.$message.error('登陆超时,请重新登陆...')
    setTimeout(function () {
      return myredirect('/login/login')
    }, 2000)
  }
复制代码

ok,到这里我们的路由跳转就配置好了,当我们的token过期之后我们就会重定向跳转到登录页面了

Related

相关文章

同分类文章 →
2025年06月10日 前端

gemini-2.5-pro-0605 按图生成html效果测试

Gemini 最新推出的 2.5 版本真的有点东西。之前用过不少 AI 辅助写代码的工具,但这次它的“图生 HTML”功能确实让我眼前一亮——上传一张设计图,它不仅能快速识别布局和元素,还能生成结构清晰、样

2025年03月14日 前端

css flex-1和overflow-hidden结合使用详解:弹性布局与内容溢出控制

在 Flexbox 布局中,flex: 1 和 overflow: hidden 是两个常用的属性,它们组合使用可以有效地控制子元素的尺寸和内容显示。flex: 1 的作用:当子元素设置 flex: 1 时,它会根据 Flex 容器的主轴方向,自动伸缩以填充剩余的可用

2025年03月13日 前端

Vue 3中实现处理后的v-model双向绑定

在Vue 3中,当你需要对v-model传入的值进行处理后再展示或使用时,可以使用计算属性的getter和setter来实现这种处理过程的双向绑定。 实现步骤 接收父组件传递的v-model值 创建计算属性,在getter中处理展示值,在setter中处

WeChat

扫码加我微信

微信二维码