Vue路由傳參的三種方式

2021-10-06 15:52:32 字數 791 閱讀 6172

第一種

父元件:

getdescribe1 (id) `})}

路由:另外路由需要配置,在path中新增/:id來對應 $router.push 中path攜帶的引數

,
這種方法引數值會跟在url後面,子元件通過this.$route.params.id獲取傳過去的引數

第二種父元件:通過路由屬性中的name來確定匹配的路由,通過params來傳遞引數。

getdescribe2 (id) 

})},

路由:路由不需要特別配置

這種方法引數值不會出現在url種,子元件通過this.$route.params.id獲取傳過去的引數

第三種父元件:使用path來匹配路由,然後通過query來傳遞引數

getdescribe3 (id) 

})},

路由:不需要特別配置

這種方法query傳遞的引數會顯示在url後面?id=?,子元件通過this.$route.query.id獲取傳遞的引數

vue路由傳參三種方式

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

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

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

總結vue路由傳參的三種方式

this router.push 需要對應路由配置如下 在子元件中可以使用來獲取傳遞的引數值。this route.params.id注意 這種方法頁面重新整理資料不會丟失 this router.push 可以使用這種方法獲取引數 this route.params.id注意 此種方法頁面重新整理...