vue路由的傳參方法方式有三種

2021-10-05 11:02:06 字數 746 閱讀 9090

1.用動態繫結

路由配置

傳參頁面

this.$router.push(` // 動態傳的引數

});

獲取頁面

const params = this.$route.params
2.query傳參

路由配置

傳參頁面

this.$router.push(

});

獲取頁面

const params = this.$route.query
3.params傳參

路由配置

傳參頁面

this.$router.push(

});

獲取頁面

const params = this.$route.params
使用params傳參一定要注意,不能用path屬性跳轉,可以用name。params對比上面兩種的區別是位址列裡不會出現傳遞的引數,比較乾淨。

說到這,還有一種寫法跟第一種類似。就是在path的最後以問號傳參形式直接傳入引數。如下面

`

}

同樣在params裡獲取

vue路由傳參三種方式

vue路由傳參分為三種方式 url形如 http localhost 8080 path 1 true 1 方法中使用模板字串 methods 2 在路由配置檔案中進行引數名配置 3 子頁面通過params接收引數 export default test02 created this console...

Vue路由傳參的三種方式

第一種 父元件 getdescribe1 id 路由 另外路由需要配置,在path中新增 id來對應 router.push 中path攜帶的引數 這種方法引數值會跟在url後面,子元件通過this.route.params.id獲取傳過去的引數 第二種父元件 通過路由屬性中的name來確定匹配的路...

vue路由傳參的三種基本方式

this.router.push 路由配置 在home元件中獲取引數值 this.route.params.id 複製 通過name來匹配路由,通過param來傳遞引數 this.router.push 用params傳遞引數,不使用 id home元件中獲取引數 this.route.params...