如何访问nuxt.js中动态嵌套路由的url答案

【问题标题】：How to access the url of dynamic nested route in nuxt.js如何访问nuxt.js中动态嵌套路由的url
【发布时间】：2021-05-14 23:52:19
【问题描述】：

我想生成这样的网址

http://example.app/activate?serial=esdse3434?machine=jni9ninei9

我知道 nuxt 文件系统允许动态嵌套路由，doc

我知道如何使用$route.params.id 获取当前路由的名称或值，但是如何在子路由中获取父路由的值，例如

pages/
--| activate/
-----| _serial/
--------| _machine.vue

有没有办法在_machine 中获取_serial 的参数？

【问题讨论】：

【解决方案1】：

问题是，您将路由参数与查询参数混淆了。路由参数是使用/ 分隔的URL 部分。查询字符串是您正在寻找的用于创建这些类型的 URL。

如果我创建了一个与你相同的目录结构，然后安装在 _machine.vue 中，我运行 console.log(this.$route.params) 我会得到以下输出：

{
    serial: "test",
    machine: "test2"
}

要使用此页面结构，URL 应类似于 localhost:3000/activate/test/test2。

要使用查询字符串，您需要有一个名为 activate.vue 的页面，然后在该页面内您需要访问 $route.query.serial 和 $route.query.machine。您不会使用文件夹和嵌套页面。这仅适用于路由参数。

【讨论】：

【解决方案2】：

可以这样（在activate.vue），不需要任何额外的页面

<button @click="$router.push({ path: '/activate', query: { serial: 'esdse3434', machine: 'jni9ninei9' } })">
  Generate link
</button>

编辑如何使其动态

mounted() {
  this.$router.push({
    path: '/activate',
    query: { serial: this.$route.query.serial, machine: this.$route.query.machine },
  })
},

【讨论】：

那么我的问题将是如何动态获取串行和机器的值。我在这里使用挂载mounted () { this.$router.push({ path: '/activate', query: { serial: '', machine: '' } }) },，例如我发送用户访问链接localhost:3000/activate?serial=dsdwewqq&machine=wqew2q2323/…。 serial 和 machine 的值是动态的，可以是任何值。
@xtremeCODE 我已经在我的回答中回答了这个问题+对您现在尝试的当前方法的解释
是的，这就是我投票给你@Jordan 的原因（本质上是在回答如何生成 URL）