歡迎您光臨本站 註冊首頁

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

←手機掃碼閱讀     sl_ivan @ 2020-05-11 , reply:0

日常業務中,路由跳轉的同時傳遞參數是比較常見的,傳參的方式有三種:
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


[sl_ivan ] vue路由跳轉傳遞參數的方式總結已經有108次圍觀

http://coctec.com/docs/vue-js/show-post-233850.html