Vue路由傳值的三種方式

2021-09-25 17:30:18 字數 656 閱讀 6116

1、動態路由

//1、在定義路由的時候通過/:屬性/:屬性 來定義傳遞的屬性


例如：path:"/detail/:id/:name"


//2、在路由跳轉的時候通過/值/值將當前頁面的資料傳遞到對應跳轉的元件中去


例如：//3、跳轉到指定頁面，在created中通過this.$route.params進行接收


let = this.$route.params
2、query傳值

//1、query傳值就是get提交資料的形式，進行url的資料拼接


例如：//2、跳轉到到指定頁面,在created中通過this.$route.query進行接收


let = this.$route.query
3、路由解耦(針對動態路由)

1、在定義路由的時候通過/:屬性/:屬性 來定義傳遞的屬性


例如：path:"/detail/:id/:name"


2、定義路由的時候需要配置乙個屬性props：true


3、在路由跳轉的時候通過/值/值將資料傳遞到對應的元件中去


例如：4、在對應的元件內部通過props進行資料的接收


例如：props:["id","name"]

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元件傳值的三種方式

非父子元件傳值 一種傳值 emit 1 父元件給子元件傳值 父元件繫結動態屬性傳值 傳方法 傳例項 2 子元件通過props 接收父元件傳過來的值 方法 父親例項 props methods 執行父元件方法也可直接呼叫 執行 特 如果子元件和父元件傳值的props和data中定義的重複則會衝突，都有...