vue路由跳轉傳遞參數的方式總結

日常業務中，路由跳轉的同時傳遞參數是比較常見的，傳參的方式有三種：

1）通過動態路由方式

//路由配置文件中 配置動態路由{ path: ’/detail/:id’, name: ’Detail’, component: Detail }//跳轉時頁面var id = 1;this.$router.push(’/detail/’ + id) //跳轉后頁面獲取參數this.$route.params.id

2）通過query屬性傳值

//路由配置文件中{ path: ’/detail’, name: ’Detail’, component: Detail }//跳轉時頁面this.$router.push({ path: ’/detail’, query: { name: ’張三’， id: 1, }}) //跳轉后頁面獲取參數對象this.$route.query

3）通過params屬性傳值

//路由配置文件中{ path: ’/detail’, name: ’Detail’, component: Detail }//跳轉時頁面this.$router.push({ name: ’Detail’, params: { name: ’張三’， id: 1, }}) //跳轉后頁面獲取參數對象this.$route.params

總結：

1.動態路由和query屬性傳值 頁面刷新參數不會丟失， params會丟失

2.動態路由一般用來傳一個參數時居多(如詳情頁的id), query、params可以傳遞一個也可以傳遞多個參數 。

補充方法：

頁面刷新數據不會丟失

methods：{ insurance(id) { //直接調用$router.push 實現攜帶參數的跳轉 this.$router.push({ path: `/particulars/${id}`, })}

需要對應路由配置如下：

this.$route.params.id

到此這篇關于vue路由跳轉傳遞參數的方式總結的文章就介紹到這了,更多相關vue路由跳轉傳遞參數的三種方式內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！