vue路由带参跳转遇到的问题

最新推荐文章于 2024-04-16 11:20:57 发布
最新推荐文章于 2024-04-16 11:20:57 发布
阅读量2.9k 收藏
点赞数 1
分类专栏： js vue 文章标签： vue  前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lwq_123456/article/details/89577143
版权
js 同时被 2 个专栏收录
6 篇文章 0 订阅
订阅专栏
vue
1 篇文章 0 订阅
订阅专栏

vue 路由跳转的一个坑

关于this.$route.push({path:‘xxx/xxx’,query:’’})遇到的问题

一般情况下大家都是从列表页跳转到详情页 ，会前端带参数对象过去，但是如果使用
this.$route.push({name:'xxxx/xxx',params:{}})的话 ，需要在router里配置name,不能和path直接使用，所以一般都会使用this.$route.push({path:'${路由}',query:{}})来处理，但是这里有一个问题：
刚进入详情的时候是好的，到那时刷新浏览器之后就会报错[Object Object]的错，通过query传过来的对象会失效，所以在解决这个问题的时候，我一般采用 JSON.strinngfy()去字符串化，在放入query传过去，到对应页面后在转回对象，就不会有刷新，取不到数据的问题了。

随手一记，如果还有更好的简单快捷的方法，请兄弟姐妹们慷慨告知，哈哈，感激不尽！！！！！

做一只向上爬的蜗牛
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【vue3|第1期】路由router.push的使用以及问题分析与处理
Commas的博客
09-13 5171
页面跳转有很多方法，本次使用的是vue-router，但却在使用的时候遇到了点麻烦，所以记录下来，希望可以帮助有需要的人。
Vue中this.$router.push路由跳转,刷新参数消失
cainiaoysa的博客
06-11 3491
Vue中this.$router.push路由跳转,刷新参数消失 this.$router.push({name:"",params:{id:""}}) name和params搭配刷新参数会消失 this.$router.push({path:"",query:{id:""}}) path和query搭配，刷新页面参数不会消失，query中参数成了url中的一部分。 在项目中,通过一个列表进入详情页,携带参数id渲染不同的详情页,动态传参使用编程式跳转。 vue传参方法一 在router路由配置中。 { p
＜router-link＞出现Error: No match for {“name“:“home“,“params“:{}}
最新发布
m0_59519985的博客
04-16 1070
与传统的多页面应用不同，单页面应用可以实现快速的页面加载和无刷新的页面更新，提供更流畅的用户体验。在将标签换到的时候出现No match for {"name":"home","params":{}}这样的错误，其中格式并无错误，可是玄学的是：当我另起一行写,并把中的内容复制到时，错误却消失了，百思不得其解，有没有懂的佬可以分享一下。
Vue路由this.$router.push跳转页面不刷新
Marray000的博客
11-01 5255
在vue项目开发中，使用路由进行页面跳转时，路由所跳转的页面不进行刷新。也就是vue生命周期函数没有执行(created、mounted钩子函数)。
vue中路由跳转报错
小葵坤_易安的博客
06-28 2719
Error: Avoided redundant navigation to current location: "/X". 解决：在router文件夹下的index.js中加入代码： import Vue from 'vue' import Router from 'vue-router' import Chat from '../components/Chat.vue' import User from '../components/User.vue' import Find from '../com
vue-router Uncaught (in promise) 报错问题
Andrew_SJ的博客
10-18 2067
接手一个老的vue项目，在登录跳转时总是报错：Uncaught(in promise) undefined，看到提示应该是属于vue-router的报错，但是直接点击无法看到相应报错代码片段。搜索后发现时vue-router3.1.0以上版本在push和replace时会返回promise，而代码中没有捕获该异常导致的。参考@朝阳&online的这篇。
vue.js this.$router.push无效解决
热门推荐
gang456789的博客
09-16 3万+
login() { if(this.email.length > 0 && this.password.length >0) { this.$http.post('/api/login', { user: this.email, password: this.password
解决vue单页路由跳转后scrollTop的问题
10-18
本文将详细介绍如何解决Vue单页路由跳转后scrollTop的问题。 首先，这个问题通常是由于浏览器的默认行为导致的。当你通过Vue Router进行路由跳转时，浏览器会记住之前页面的滚动位置。为了解决这个问题，我们可以...
Vue路由跳转问题记录详解
08-30
在本文中，我们将深入探讨一个具体的Vue路由跳转问题，以及如何解决这个问题。 首先，我们要了解Vue Router的基本结构。在示例中，我们看到这样的路由配置： ```javascript { path: '/tab', component: Tab, ...
vue相同路由跳转强制刷新该路由组件操作
10-14
在Vue.js应用中，路由是...在进行路由跳转和组件刷新时，理解Vue Router的工作原理至关重要，这可以帮助我们编写出更加灵活且可维护的代码。同时，遵循最佳实践和避免常见错误，如路由命名冲突，也能提高应用的质量。
vue+requirejs页面带参跳转
06-07
本文将详细介绍如何在Vue项目中使用RequireJS实现页面带参跳转。 首先，我们需要理解Vue.js中的路由系统。Vue Router是Vue官方推荐的路由库，它允许我们定义和管理应用的路由。通过定义路由，我们可以设置不同的URL...
vue-cli3中，重复点击同一个标签实现路由跳转，出现Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation
bailizx
07-02 1667
目录 1 错误 2 原因 3 解决方法 1 错误 vue中，连续多次单击同一个路由标签（单击该标签会发生路由跳转）跳转路由时，出现Uncaught (in promise)错误。 如：上代码以及图如下 <template> <div class = "footerGuideStyle"> <a href="javascript:;" class = "footerItems" v-bind:class = "{on: isPath('/msite')
vue3路由传参获取不到params，获取到为空
liuzaixi的博客
08-17 4113
注意：从Vue Router的2022-8-22 更新后，我们使用param传参在新页面无法获取数据。
VUE 之 动态路由
夜阑珊妖妖
09-30 2218
动态路由： <router-link tag="li" :to="{name:'question', params:{id:question.questionId}}" v-for="question in questionList" :key="question.questionId"> {{ question.title }} </route...
Uncaught (in promise) Error: No match for
在工作中记录下美好的瞬间~~
09-13 3419
总结出现这个问题的主要原因就是找不到指定路由，如果也遇见这个问题可以查一下是不是路由没有配置，或者没有权限访问。今日在写前端代码的时候，用vue-route遇到了一个问题，在跳转的时候发现报了这个错误。的时候没有访问权限，改一下后台权限设置就可以完美解决了。然后我也配置了路由，但是一直还是报错，最后发现是。如果还有问题未解决的问题，可以发在评论区解决。
解决[Vue Router warn]: No match found for location with path “/day“问题
Mr__proto__的博客
07-28 2911
vue-router警告[Vue Router warn]: No match found for location with path "/day"问题
在c++函数形参里引用临时变量出错，导致"no match for xxx"
huangbo10的专栏
12-20 4084
帮别人调代码遇到的一个bug。他的代码里首先定义了一个类colum，然后重载了等号“=”操作符，函数定义是void colum::operator=(colum& c2)。接着代码里写了一句a = colum();，希望临时构造一个colum对象并赋值给对象a。如果用g++编译这段代码，会遇到下面的错误信息：/ *your_code* : In function ‘int main()’: / *y
Vue3 + vueRouter4.x 控制台No match found for location with path ‘/home‘ 解决
weixin_43630802的博客
03-06 2967
Vue3 + vueRouter4.x 控制台No match found for location with path '/home' 解决。
调用$router.push()时报出Uncaught (in promise)错误
weixin_42761614的博客
01-28 1563
用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.
vue2路由带参跳转
08-19
在 Vue 2 中，你可以使用 Vue Router 来进行带参数的路由跳转。以下是一个示例代码： 首先，你需要在路由配置中定义带参数的路由路径。你可以使用 `:` 来指定参数的占位符。 ```javascript // 路由配置 import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const routes = [ { path: '/user/:id', name: 'User', component: UserComponent, }, ]; const router = new VueRouter({ routes, }); ``` 在上述示例中，我们定义了一个带参数的路由 `/user/:id`，其中 `:id` 是参数的占位符。 接下来，你可以使用 `router-link` 组件或编程式导航来实现带参数的路由跳转。 使用 `router-link` 组件： ```html <router-link :to="'/user/' + userId">Go to User</router-link> ``` 在上述示例中，我们使用了动态绑定 `:to` 属性，并通过拼接字符串的方式传递参数。 使用编程式导航： ```javascript // 在组件中 this.$router.push('/user/' + userId); ``` 在上述示例中，我们使用 `$router.push()` 方法来进行编程式导航，同样是通过拼接字符串的方式传递参数。 无论是使用 `router-link` 还是编程式导航，都可以带参数进行路由跳转。在目标页面中，你可以通过 `$route.params` 来获取传递的参数。 ```javascript // 在目标组件中获取参数 mounted() { const userId = this.$route.params.id; console.log(userId); } ``` 在上述示例中，我们通过 `$route.params` 获取了传递的参数，并输出到控制台。 希望这可以帮助到你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值