vue 路由傳遞引數

2022-09-15 05:45:15 字數 1994 閱讀 4286

結構目錄

1. 頁面傳值(不同之間的頁面傳值)

1.1 index.js配置

原始碼:

1

//引入vue框架

2 import vue from 'vue'3//

引入vue-router路由依賴

4 import router from 'vue-router'5//

home

6 import home from '@/components/home'

78 import one from '@/components/one'910

//vue全域性使用router

11vue.use(router)

1213

//定義路由配置

1.2配置home.vue

原始碼:

123

45導航 :

6子頁面178

1.3配置one.vue

原始碼:

2. url傳值(傳遞引數-同頁面->向下page傳值)

2.1:設定路由

2.2:傳值

2.3:主頁面獲取引數

3. 程式設計式導航-params傳遞引數

3.1:設定路由

3.2:設定傳遞引數

說明:a、動態路由使用params傳遞引數,在this.$router.push() 方法中path不能和params一起使用,否則params將無效。需要用name來指定頁面。

b、以上方式引數不會顯示到瀏覽器的位址列中,如果重新整理一次頁面,就獲取不到引數了

3.3:接收引數並且顯示

4.程式設計式導航-query傳遞引數

4.1:修改傳遞引數形式

4.2:修改接收引數形式

5.以上兩種方式,有什麼不同呢?paramsquery

5.1 query傳參

5.2:params傳參

vue路由傳遞引數

1.通過path來確定匹配的路由,通過query來傳遞引數 傳參 golist title,id 注意這裡是 router 接參 this.params.brandid this.route.query.id 這裡是 route2.通過路由屬性name確定匹配路由,通過params傳遞引數 傳參 g...

Vue 路由傳遞引數

vue 路由傳遞引數與 vue傳遞引數不同 vue router傳遞引數分為兩大類 程式設計式的導航 router.push 宣告式的導航 程式設計式的導航 router.push 程式設計式導航傳遞引數有兩種型別 字串 物件。字串字串的方式是直接將路由位址以字串的方式來跳轉,這種方式很簡單但是不能...

Vue路由跳轉傳遞引數()

需求 在單頁應用中,從a頁面跳轉到b頁面需要攜帶部分引數,具體操作方法有以下幾種 方法1 使用 router進行跳轉 step1 在router.js中定義攜帶引數的名稱 step2 在a頁面跳轉時攜帶引數 let id 0 this.router.push step3 在b頁面接收引數 let i...