vue router.push in nuxt 使用 route.name答案

【问题标题】：vue router.push in nuxt using route.namevue router.push in nuxt 使用 route.name
【发布时间】：2021-10-30 00:34:51
【问题描述】：

我使用 nuxt 并遇到以下问题。我的旧代码如下所示：

this.$router.push({path: "about/me"})

现在我需要使用一些参数进行相同的调用：

this.$router.push({path: "about/me", params: {sendNotification: "1"}})

这显然不起作用，因为 vue-router 只允许使用 params 和 name 而不是 path，所以它必须看起来像：

  this.$router.push({name: ..., params: {sendNotification: "1"}})

我可以用query 而不是params 来做到这一点，但我不希望我的网址看起来很难看。 nuxt 的问题是，或者至少这是我对 nuxt 的理解，它使用文件夹结构生成路由名称，在我的情况下也是语言环境。所以这条路线的名字其实是：“personal-about-me__en”。

所以我的问题是：有没有办法动态获取route.name，所以我可以写如下内容：

  this.$router.push({name: getRouteNameByPath("about/me"), params: {sendNotification: "true"}})

【问题讨论】：

【解决方案1】：

路由路径的名称与您可以提供给.vue 文件的name 属性相匹配。所以，写为name: 'AboutMe' key 属性，并在路由器中使用{ name: 'about-me' }。

另外，vue devtools 有一个路由选项卡，其中包含所有可用路由的名称。

【讨论】：

【解决方案2】：

这显然不起作用，因为 vue-router 只允许使用带有名称而不是路径的参数。

为什么需要在路径旁边传递参数？您应该将参数添加到路径本身，这就是 vue-router 不允许单独的参数对象的原因。

所以例如假设您的动态路由是about/me/:sendNotification，您可以提供带有命名路由的参数：

this.$router.push({name: ..., params: {sendNotification: "1"}});

将您定向到about/me/1。

或者你可以推送整个路径，包括参数

this.$router.push({ path: 'about/me/1' });

两者都会产生完全相同的结果。

【讨论】：