Vue 路由傳遞引數

2022-06-28 21:57:14 字數 1792 閱讀 5672

vue 路由傳遞引數與 vue傳遞引數不同

vue-router傳遞引數分為兩大類

程式設計式的導航 router.push

宣告式的導航

程式設計式的導航 router.push

程式設計式導航傳遞引數有兩種型別:字串、物件。

字串字串的方式是直接將路由位址以字串的方式來跳轉,這種方式很簡單但是不能傳遞引數:

this.$router.push("home");

物件想要傳遞引數主要就是以物件的方式來寫,分為兩種方式:命名路由、查詢引數,下面分別說明兩種方式的用法和注意事項。

命名路由

命名路由的前提就是在註冊路由的地方需要給路由命名如:

命名路由傳遞引數需要使用params來傳遞,這裡一定要注意使用params不是query。目標頁面接收傳遞引數時使用params

特別注意:命名路由這種方式傳遞的引數,如果在目標頁面重新整理是會出錯的

使用方法如下:

this.$router.push(})

**如下:

click here to news page

接受傳遞的引數:

this is the news page.the transform param is }

執行效果如下:

查詢引數

查詢引數其實就是在路由位址後面帶上引數和傳統的url引數一致的,傳遞引數使用query而且必須配合path來傳遞引數而不能用name,目標頁面接收傳遞的引數使用query。

注意:和name配對的是params,和path配對的是query

使用方法如下:

this.$router.push(});

**如下:

click here to news page

接收引數如下:

this is the news page.the transform param is }

執行效果如下:

宣告式的導航

宣告式的導航和程式設計式的一樣,這裡就不在過多介紹,給幾個例子大家對照程式設計式理解,例子如下:

字串click to news page

命名路由

click to news page

執行效果如下:

查詢引數

click to news page

執行效果如下:

最後總結:路由傳遞引數和傳統傳遞引數是一樣的,命名路由類似表單提交而查詢就是url傳遞,在vue專案中基本上掌握了這兩種傳遞引數就能應付大部分應用了,最後總結為以下兩點:

1.命名路由搭配params,重新整理頁面引數會丟失

2.查詢引數搭配query,重新整理頁面資料不會丟失

3.接受引數使用this.$router後面就是搭配路由的名稱就能獲取到引數的值

vue路由傳遞引數

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

vue 路由傳遞引數

結構目錄 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 ...

Vue路由跳轉傳遞引數()

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