时间戳

首页 > 解决方案 > Vue路由器。使用查询参数调用 this.$router.push() 会导致双重路由器更​​新

vue.js - Vue路由器。使用查询参数调用 this.$router.push() 会导致双重路由器更​​新

问题描述

我试着写分页。问题在于下一个/上一个按钮。单击时，我尝试使用路径名和几个查询调用 this.$router.push() 。问题是 vue-router 立即通过查询进入正确的链接，但在立即进入同一链接但没有查询之后。

这是分页按钮上的方法

goToPage(forward) {
  this.$router.push({name: 'spots', query: {per_page: 5, page: 2}});
}

这就是在 router.js 文件中定义路由的方式

{
  path: '/:eventId/guestlists/:guestlistId/spots',
  component: SpotsAndMeals,
  name: 'spots',
  props: true
},

我想要什么？我想在我的浏览器中执行 goToPage 函数后更新路由并显示查询参数。

标签： vue.jsvue-router

解决方案

谢谢大家的尝试！但是我发现了问题。问题在于 Vue 如何与相同的<router-view>. 如果我通过查询从 path.name A 转到 path.name B 一切正常。如果我通过查询从 path.name A 转到 path.name A，魔术就开始了。为了克服这一点，我需要添加<router-view :key="$route.fullPath"></router-view>. 所以现在 Vue 的行为符合我的预期

推荐阅读