vue頁面跳轉以及傳參和取參

2022-06-21 15:00:10 字數 1213 閱讀 1819

vue中this.$router.push()路由傳值和獲取的兩種常見方法

1、路由傳值   this.$router.push()

(1) 想要導航到不同的url,使用router.push()方法,這個方法會向history棧新增乙個新紀錄,所以,當使用者點選瀏覽器後退按鈕時,會回到之前的url

(2)當點選 時,這個方法會在內部呼叫,即點選 等同於呼叫 router.push(...)

a)      宣告式:

b)      程式設計式:router.push(...)

c)      該方法的引數可以是乙個字串路徑,或者乙個描述位址的物件。 

// 字串

router.push('home')

// 物件

this.$router.push();

// 命名的路由

router.push(})

// 帶查詢引數,變成/backend/order?selected=2

this.$router.push(});

// 設定查詢引數

// 設計查詢引數物件

let querydata = {};

if (this.$route.query.stage)

if (this.$route.query.url)

this.$router.push();

2、獲取引數的兩種常用方法:params和query

(1)由於動態路由也是傳遞params的,所以在 this.$router.push() 方法中path不能和params一起使用,否則params將無效。需要用name來指定頁面。

及通過路由配置的name屬性訪問

this.$router.push(})

(2)在目標頁面通過this.$route.params獲取引數:

(3)在目標頁面通過this.$route.query 獲取引數

兩種方式的區別是query傳參的引數會帶在url後邊展示在位址列,params傳參的引數不會展示到位址列。需要注意的是接收引數的時候是route而不是router。兩種方式一一對應,名字不能混用

vue頁面跳轉傳參問題傳參

vue 的頁面跳轉以及頁面之間傳參其實是乙個很常見的問題,但是整體上會使用的次數很多,有時候頁面的跳轉不需要引數,因為他屬於那種公共的,大家都可以看到。但是當乙個頁面屬於我們非公共的頁面時,我們就需要我們的資料跟著跳轉過來了,比如說我們的個人資訊或者是個人設定,這些都需要我們去帶著引數去請求,否則服...

Vue頁面跳轉傳參

日期 2020年3月15日 1 通過router link進行跳轉,傳遞方式 使用query傳遞引數,路由必須使用path引入,使用params傳遞引數,路由必須使用name引入 跳轉位址 content?key hello value world 取值 this.route.query.key 跳...

vue頁面傳參和接參

js this.router.push 跳轉傳引數 接參 console.log this.route.params 頁面 在父路由元件上使用router link進行路由導航,傳參用的形式向子路由元件傳遞引數。使用router view進行子路由頁面內容渲染,父路由元件childone.vue 如...