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

現有如下場景，點選父元件的li元素跳轉到子元件中，並攜帶引數，便於子元件獲取資料。

父元件中：

for="article in articles" @click="getdescribe(article.id)">

getdescribe(id) `,

})

this.$route.params.id

this.$router.push(

})

this.$route.params.id

這種情況下 query傳遞的引數會顯示在url後面?id=？

this.$router.push(

})

this.$route.query.id

這裡要特別注意 在子元件中 獲取引數的時候是$route.params 而不是

$router 這很重要~~~

tips

可能上面少了this 會誤導新手 直接使用 $route來獲取，所以這邊加上this

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

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

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

現有如下場景，點選父元件的li元素跳轉到子元件中，並攜帶引數，便於子元件獲取資料。父元件中 li v for article in articles click getdescribe article.id getdescribe id 方案一，需要對應路由配置如下 很顯然，需要在path中新增 i...

vue路由傳參三種方式

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