Vuejs2 Vue路由器：保留查询参数并对子级使用相同的视图

我正在用Vue重写现有的Angular 1应用程序

在进入任何视图之前，应用程序始终需要通过

locale

、

id

和

token

对用户进行身份验证。根据API的约定，我在主父路由中指定了

令牌

作为查询参数

从现有Angular的UI路由器实现来看，我认为这是一个方向：

//main.js
新Vue({
el:“#应用程序”，
路由器，
商店，
模板：“”
})
//路由器.js
const路由器=新路由器({
模式：“历史”，
路线：[
{
名称：“开始”，
路径：'/:locale/:id'，//:locale/:id？令牌不起作用
查询：{
令牌：空
},
输入前（到、从、下一个）{
//1.通过区域设置、id和令牌从API获取数据
//2.使用用户数据更新存储
},
组成部分：{
主：startComponent
},
儿童：[{
名称：'profile'，
路径：“配置文件”，
组成部分：{
主：配置文件组件
}
}]
}
]
})    

当我导航到

profile

视图时，我希望视图会更改，查询令牌会保留，例如

/en-US/123？token=abc

到

/en-US/123/profile？token=abc

。两者都没有发生

我正在使用Vue 2.3.3和Vue路由器2.3.1

问题:

• 导航到子路由时是否可以保留查询参数
• 我正在这里使用Vue路由器吗？还是我需要责怪我的UI路由器偏见

---

您可以在路由器的全局钩子中解决此问题

从“vue路由器”导入VueRouter；
从“./routes”导入路由；
常量路由器=新的VueRouter({
模式：“历史”，
路线
});
函数hasQueryParams（路由）{
return！！Object.keys（route.query）.length
}
路由器.beforeach（（到、从、下一个）=>{
如果（！hasQueryParams（to）&&hasQueryParams（from））{
下一步（{name:to.name，query:from.query}）；
}否则{
下一个（）
}
})

---

如果新路由（

to

）没有自己的参数，那么它们将从上一个路由（

from

）

实际使用

toWithQuery=Object.assign（{}，to，{query:from.query}）；下一步（toWithQuery）更多robust@oliverpool+1，如果没有这个，我很难返回到根页面。p、 这看起来像是处理本地化的一种方法，所以我很惊讶没有更多关于这个用例的内容可以阅读。非常感谢！需要注意的是，
next（）
必须是Vue路由器知道何时停止进入下一页的最后一次导航调用。我有可选的动态路由，因此当存在参数时，我的路由会被阻塞。这是可行的：
next（{…to，query:from.query}）