记录vue-route遇到的坑

最新推荐文章于 2023-09-08 18:33:42 发布
最新推荐文章于 2023-09-08 18:33:42 发布
阅读量513 收藏
点赞数
文章标签： vue-router
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41481109/article/details/103048333
版权

记录vue-route遇到的坑

vue-router在3.1.0版本新增的push和replace方法会返回一个promise，如果路由地址跳转相同, 且没有捕获到错误，控制台始终会出现 Uncaught (in promise) 的警告 （注：3.0以下版本则不会出现以下警告！！！，因路由回调问题…）

解决方法：

  1. 在调用方法的时候用catch捕获异常：
this.$router.push({ path: 'xxx' }).catch(err => {
   
})
  1. vue-router降版本，将原本3.0以上的版本卸载重装3.0以下的版本即可
qq_41481109
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VueRouter 动态路由配置的坑
未金涛的博客
04-10 244
title: VueRouter 动态路由配置的坑 tags: router dynamic VueRouter 动态路由配置的坑 最大的坑是在配置3级侧边栏动态路由。我们必须在二级路由界面添加<router-view />。这个问题耗时5个小时，最后还是在我师傅的帮助下解决。 路由js文件 { path: '/loginHome', component: Layout, name: 'LoginHome', redirect: '/loginHo.
vue-router:vue-router源码学习
03-23
- **Route纪录**: 每次导航都会创建一个新的Route对象，记录当前的路由信息。 3. **导航守卫** - **全局守卫**: `beforeEach`、`afterEach` 分别在每次导航开始前和结束后执行，可以进行权限控制、数据预加载等...
路由守卫后，this.$router.push(会报错Uncaught (in promise)
weixin_38897313的博客
12-27 2441
注册一个全局前置路由守卫后，this.$router.push(会报错Uncaught (in promise) 解决办法：在router/index.js文件下 /*设置路由守卫后，this.$router.push(会报错Uncaught (in promise)*/ const originalPush = VueRouter.prototype.push; VueRouter.protot...
VueRouter
qq_35381464的博客
11-17 144
1.什么是VueRouter? VueRouter和v-if/v-show一样,是用来切换组件的显示的 v-if/v-show是标记来切换(true/false) VueRouter用哈希来切换(#/xxx) 比v-if/v-show强大的是VueRouter不仅仅能够切换组件的显示,还能够在切换的时候传递参数 2.VueRouter使用 2.1导入VueRouter 2.2定义路由规则 2.3根据路由规则创建路由对象 2.4将路径对象挂载到Vue实例中 2.5修改URL...
vue-router错误
weixin_47306228的博客
06-29 580
出现这个问题的原因是因为： 在vue实例中路由的名称必须为router,而不能是其他
Vue Router查漏（5）
Mybells
09-12 167
vue-router查漏
Vue——Vue-Router的push和replace方法[Uncaught (in promise) Error]解决方案
无限迭代中......
07-25 2848
问题描述 在升级了Vue-Router版本到到3.1.0及以上之后，页面在跳转路由控制台会报Uncaught (in promise) Error的问题 Vue更新日志 https://github.com/vuejs/vue-router/releases V3.1.0版本里面新增功能：push和replace方法会返回一个promise, 你可能在控制台看到未捕获的异常 问题分析 解释：没有捕获异常。 解决方案 方法一： 检查代码 1、首先检查router.js中的路由...
vue-router之解决addRoutes使用遇到的坑
11-20
最近项目中使用了vue-router的addRoutes这个api，遇到了一个小坑，记录总结一下。 场景复现： 做前端开发的同学，大多都遇到过这种需求：页面菜单根据用户权限动态生成，一个常见的解决方案是： 前端初始化的时候，...
解决vue-router 切换tab标签关闭时缓存问题
10-15
在Vue.js应用中，使用Vue Router进行页面导航时，可能会遇到一些关于页面缓存的问题，尤其是在涉及切换Tab标签时。本文将深入探讨如何解决Vue Router切换Tab标签时关闭页面仍保持缓存的状态。 首先，Vue Router中的...
Vue-router的使用和出现空白页,路由对象属性详解
12-04
在使用 Vue-router 时，可能会遇到一些问题，比如页面显示空白，这通常与配置错误或组件加载有关。 1. **Vue-router 的两种模式**： - **hash 模式**：使用 URL 的 `#` 部分来改变路由，如 `...
【Vue】Router路由无法跳转问题整理
最新发布
Sheldon74的博客
09-08 1万+
Vue Router路由无效或异常等问题整理
调用$router.push()时报出Uncaught (in promise)错误
weixin_42761614的博客
01-28 1570
用this.$router.push()时会返回一个异常，那是因为用push或者replace时会返回一个promise对象，而并没有捕获所以有Uncaught （in promise）错误，因此我们只要捕获就好了 第一种方法是直接捕获 在push()后调用一个catch方法 this.$router.push(this.path).catch(err=>err) 第二种方法是重写原型中的push方法 import Router from 'vue-router' const original.
解决Vue多次传递重复参数会报错
苗苗的博客
08-30 592
/ location告诉原来的push方法，往哪里调传递那些参数。先把VueRouter原型对象上的push保存一份，防止覆盖成空。// 先把vuerouter原型对象的push，先保存一份。在src下的router下的index.js。// resolve成功回调另一个失败的回调。// 重写push和replace方法。// 重写push和replace方法。这样在传递相同参数时就不会报出相关错误。push和replace。push和replace。...
路由 vue-router 和 Promise
qq_43609453的博客
07-28 1012
路由 vue-router 接vue脚手架三十、路由1、前后端路由概念2、改变url而不跳转页面的方法2.1、url的hash2.2、history.pushState()2.3、history.replaceState()2.4、history.go()3、安装vue-router4、配置vue-router5、创建router实例6、项目代码详解7、使用路由7.1、router-link 标签7.2、router-view 标签7.3、代码7.4、router-link 其他属性的补充7.4.1、tag
关于Promise和router的坑
MR.杜的博客
06-03 234
首先明确this.$route.push() =>本身返回的也是Promise对象问题：执行函数后只输出444和666 但是不执行push跳转 解决：1.dispatch和router联合使用的bug dispatch加await可解决 加判断
路由多次执行相同push|replace报错问题
laya1211的博客
09-06 377
push是一个promise，promise需要传递成功和失败两个参数，我们的push中没有传递。
vue3之promise
leveretz的博客
11-08 1534
vue3之promise
vue中的$router 和 $route的区别
liudachu的博客
09-29 514
vue2.0中的$router 和 $route的区别 最近在学习vue的单页面应用开发，需要vue全家桶，其中用到了VueRouter，在路由的设置和跳转中遇到了两个对象$router 和$route ，有些傻傻分不清，后来自己结合网上的博客和自己本地的Vue devtools结构了解了他们的区别 1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的
vue-router重写push方法，解决相同路径跳转报错
热门推荐
u013595395的博客
11-05 1万+
修改vue-router的配置文件，默认位置router/index.js import Vue from 'vue' import Router from 'vue-router' /** * 重写路由的push方法 * 解决，相同路由跳转时，报错 * 添加，相同路由跳转时，触发watch (针对el-menu，仅限string方式传参，形如"view?id=5") */ co...
vue-route js下载
08-08
Vue-Router是Vue.js官方提供的路由管理器，用于实现单页面应用（SPA）的路由控制。如果想要使用Vue-Router，可以通过以下几个步骤进行下载和安装。 首先，在项目的根目录下，打开命令行终端。运行以下命令，使用npm（Node包管理工具）来下载Vue-Router： ``` npm install vue-router ``` 这样就会自动从npm仓库下载Vue-Router，并将其安装在你的项目目录下的`node_modules`文件夹中。 接下来，在你的Vue.js项目的主文件中（通常是`main.js`或`app.js`），引入Vue-Router。可以使用以下代码将Vue-Router导入到你的项目中： ```javascript import VueRouter from 'vue-router'; ``` 然后，将Vue-Router与Vue.js关联起来，通过以下代码使用Vue.use()方法： ```javascript Vue.use(VueRouter); ``` 接着，你需要在你的项目中创建一个路由实例，并配置路由规则。可以在你的主文件中添加以下代码： ```javascript const router = new VueRouter({ routes: [ // 在这里配置你的路由规则 ] }); ``` 在`routes`选项中，你可以定义各个路径对应的组件、路由的名称、路径等。 最后，将路由实例挂载到Vue实例上。在你的主文件中，找到Vue的实例化代码，将刚刚创建的路由实例作为`router`选项的值，如下所示： ```javascript new Vue({ router, // ... }).$mount('#app'); ``` 这样，Vue-Router就已经成功下载和配置好了。你可以根据你的项目需求，进一步配置和使用Vue-Router来实现路由功能，包括导航守卫、动态路由、嵌套路由等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值