如何訪問 nuxt.js 中動態嵌套路由的 url

Question

我想像這樣生成一個 url

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

我知道 nuxt 文件系統允許動態嵌套路由， 文檔

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

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

有沒有辦法在_serial中獲取_machine的參數？

Answer 1

問題是，您將路由參數與查詢參數混淆了。 路由參數是 URL 的分隔部分，使用/ 。 您正在尋找一個查詢字符串來創建這些類型的 URL。

如果我創建了一個與您相同的目錄結構，然后安裝在_machine.vue中，我運行console.log(this.$route.params)我會得到以下 output：

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

要使用這個頁面結構，URL 看起來像localhost:3000/activate/test/test2 。

要使用查詢字符串，您需要有一個名為activate.vue的頁面，然后在該頁面內您需要訪問$route.query.serial和$route.query.machine 。 您不會使用文件夾和嵌套頁面。 這僅適用於路線參數。

Answer 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 },
  })
},

有關官方文檔的更多信息： https://router.vuejs.org/guide/essentials/navigation.html