目錄

一、聲明式導航

二、編程式導航

三、兩句話總結

---

一、聲明式導航

1. 傳參跳轉：

<router-link :to="/user?name=CHEEMS&id=114514">Query傳參
</router-link><router-link :to="/user?參數名1=參數值1&參數名2=參數值2&...">Query傳參
</router-link>

2. 接參：

export default {created() {console.log(this.$route.query); // { id: "114514", name: "CHEEMS" }console.log(this.$route.query.id); // "114514"console.log(this.$route.query.name); // "CHEEMS"}
}

---

二、編程式導航

1. 傳參跳轉：

<router-link :to="/user/114514/CHEEMS">Params傳參
</router-link><router-link :to="/user/參數值1/參數值2/...">Params傳參
</router-link>

需要額外配置路由：?

// 路由配置
routes: [{ path: '/home/:id/:name', component: Home },{ path: '/user/:id/:name?', component: User } // 參數名后面加個?表示參數可選]// 路由配置
routes: [{ path: '/home/:參數名1/:參數名2/:...', component: Home },{ path: '/user/:參數名1/:參數名2?/:...', component: User } // 參數名后面加個?表示參數可選]

2. 接參：

export default {created() {console.log(this.$route.params); // { id: "114514", name: "CHEEMS" }console.log(this.$route.params.id); // "114514"console.log(this.$route.params.name); // "CHEEMS"}
}

---

三、兩句話總結

• Query適合傳臨時參數，如搜索、分頁、篩選等。
• Params適合傳固定資源路徑，如用戶ID、文章標題等。