vue-router同路由$router.push不跳转一个简单解决方案

本文介绍了如何在Vue Router中处理同页面不同查询参数的跳转,通过watch监听路由变化实现页面刷新,并分享了一种在需要保证操作逻辑连续性时使用history.back的方法。同时,提供了相关链接以供进一步学习。

一、概述

vue-router跳转一般是这么写:

toCurrentPage: function(thisId){
          this.$router.push({path:'/test ', query: { id: thisId, option: ""}});
 }

但是当遇到,需要跳转同页面不同query的情况,上面的方法不起作用。当然了,从性能来说,理论上这种情况最佳的解决方案,是把需要刷新的包裹成一个init function,跳转的方法,传参再次调用init方法。balabalabala……不在赘述。

但是另一些情况,基本页面所有组件都需要刷新,再次加载对开销影响不大,需要history.back以保证操作逻辑顺畅……我们只要跳转加载如此而已,那么其实也很简单,只需在上述方法基础上加上:

watch: {
    '$route' (to, from) {
        this.$router.go(0);
    }
},

监视router变化,刷新页面,效果就正常了!

本文参考链接:

https://blog.youkuaiyun.com/wulala_orz/article/details/78928524

<think>好的,用户想了解在使用vue-routerrouter.push方法进行页面跳转时如何传递参数。我需要先回忆vue-router的相关知识,并结合提供的引用内容来组织答案。 首先,用户提到的router.push方法传参,常见的方式有query和params两种。但根据引用[4],params传参可能会有问题,需要注意路由配置中的参数定义。比如,路径需要包含对应的参数占位符,如/detail/:id,否则参数可能丢失。 然后,引用[4]中的例子显示,使用params时需要在路由配置里定义参数,然后通过name进行跳转。而query参数则可以直接在path后面添加,需要预先定义。这可能是一个关键点,需要区分两者的使用场景和限制。 另外,引用[1]和[2]提到了router-view的key绑定和router-link的使用,但用户的问题主要集中在传参,这部分可能需要涉及太多,但可能需要提到编程式导航和声明式导航的区别,比如router-link和this.$router.push使用方式,如引用[2]中的例子。 还要注意,在编程式导航中,params如果和path一起使用会导致参数无法传递,必须使用name,而query则两者都可以。这一点需要明确说明,避免用户出错。 然后,用户可能需要知道如何在目标页面接收参数,比如通过this.$route.params或this.$route.query来获取。引用[4]中的例子也提到了这一点,需要强调在目标页面正确获取参数的方法。 此外,可能还需要提到动态路由匹配,比如引用[4]中的路径配置,以及如何处理可选参数或者多个参数的情况。例如,路由配置中定义多个参数,跳转时传递多个params。 还有,引用[3]提到了重写push方法解决相路径跳转的问题,这可能与传参无关,但如果用户遇到跳转路径刷新的问题,可能需要添加随机参数,如location + "?random=" + Math.random(),但这里用户的问题主要是传参,所以这部分可能作为注意事项提及,或者在相关问题中提出。 最后,根据用户提供的引用,需要确保答案中的方法正确,比如使用name和params,或者path和query,时避免常见错误,如未定义params对应的路径参数导致参数丢失。 总结一下,回答的结构应该分点说明params和query的使用方法,注意事项,以及如何在目标页面获取参数。时,生成相关问题,如传参方式区别、参数获取到怎么办、动态路由配置等。</think>### Vue Routerrouter.push跳转传参方法详解 #### 一、两种主要传参方式 1. **params传参(动态路由匹配)** - 需在路由配置中声明参数占位符: ```javascript // 路由配置示例 const routes = [ { path: '/detail/:id', name: 'Detail', component: Detail }, { path: '/user/:name/:age', name: 'User', component: User } ]; ``` - 跳转时使用`name`+`params`组合: ```javascript // 传递单个参数 this.$router.push({ name: 'Detail', params: { id: 123 } }); // 传递多个参数 this.$router.push({ name: 'User', params: { name: 'Alice', age: 25 } }); ``` - **注意**:使用`path`时params参数会失效,必须通过`name`跳转[^4] 2. **query传参(URL参数)** - 无需预先定义参数,直接附加到URL: ```javascript // 方式一:path+query this.$router.push({ path: '/list', query: { page: 2, sort: 'desc' } }); // 方式二:name+query this.$router.push({ name: 'List', query: { category: 'books' } }); ``` - 目标URL显示为:`/list?page=2&sort=desc` #### 二、目标页面获取参数 ```javascript // 获取params参数 const userId = this.$route.params.id; // 对应/detail/:id中的id参数 // 获取query参数 const currentPage = this.$route.query.page; // 对应URL中的?page=2 ``` #### 三、常见问题解决方案 1. **params参数获取到** - 检查路由配置是否包含`:param`占位符 - 确保使用`name`而非`path`进行跳转[^4] - 示例修正: ```javascript // 错误写法(用path会导致params丢失) this.$router.push({ path: '/detail', params: { id: 123 } }); // 正确写法 this.$router.push({ name: 'Detail', params: { id: 123 } }); ``` 2. **相路径参数更新触发组件刷新** 可参考引用[1]的方案,在路径末尾添加随机参数: ```javascript router.push('/detail/123?random=' + Math.random()) ``` #### 四、综合示例 ```javascript // 路由配置 { path: '/product/:id/edit', name: 'ProductEdit', component: () => import('@/views/ProductEdit.vue') } // 跳转传参 this.$router.push({ name: 'ProductEdit', params: { id: 789 }, query: { from: 'dashboard', mode: 'advanced' } }); // 目标页面获取 const productId = this.$route.params.id; // 789 const source = this.$route.query.from; // 'dashboard' ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值