vue路由傳引數--手摸手教學
阿新 • • 發佈：2022-03-30
vue中路由跳轉及傳參（以下僅僅是根據我個人的學習與理解編輯）
一：跳轉有2種
1.方式一：
router-link to 的方式
2.方式二： this.$router.push 的方式 二：傳參有2種 1.方式一： params 配合命名路由 name 的方式 ---->引數不會顯示在位址列 2.方式二： query 配合 path 的方式 ----->你傳的引數就會直接顯示在瀏覽器位址列，就算重新整理資料也是會在的三：詳細講解如下：
1.新建2個檔案，模擬路由跳轉
如圖：1.1 params的方式傳參，對應我的檔案是 one_params_name.vue
1.2 query的方式傳參， 對應我的檔案是 two_query_path.vue
2. 配置一下這2個檔案對應的路由，用的是router-link的方式跳轉
這裡程式碼僅展示了跳轉，沒有傳引數，但是方式也是和this.router.push的傳參方式是一樣的
實現的效果就是:點選OneParamsName 跳轉到 one_params_name.vue 頁面
點選OneParamsName 跳轉到 one_params_name.vue 頁面
3.觸發點選事件，分析引數
3.1沒點選之前：如圖
3.2在OneParamsName頁面觸發點選事件
上圖說明：點選事件觸發，攜帶的引數就會帶到 TwoQueryPath這個頁面，如有需要，就可以通過this.$route.params.id取出來用
上圖說明：攜帶的引數會帶到OneParamsName.vue頁面，通過this.$route.query.id 取出來用