Vue 列表頁帶參數(shù)進詳情頁的操作(router-link)
首先，仔細看文檔！??！一點一點的踩坑過來的~~~
這里介紹params和query兩種方法
1.用params傳參
列表頁：
<router-link :to="{ name:'msgDetail', params: {id: item.msg_id} }">（注意：用params傳參這里是命名路由，用name）
</router-link>
路由配置如下：
export default new Router({
routes: [
{
path: '/msgDetail/:id',
name: 'msgDetail',
component: msgDetail
}
]
詳情頁接收參數(shù)：
this.$route.params.id（注意：這里是$route，而不是$router）
2.用query傳參
列表組件：
<router-link :to="{ path: '/msgDetail', query: {id: item.msg_id} }">（注意：用query傳參這里是帶查詢參數(shù)，用path）
</router-link>
路由配置如下：
export default new Router({
routes: [
{
path: '/msgDetail',
name: 'msgDetail',
component: msgDetail
}
]
詳情頁接收參數(shù)：
this.$route.query.id（注意：這里是$route，而不是$router）
補充知識：vue+element解決點擊table列表的從詳情或修改頁面跳轉(zhuǎn)路由到列表頁總是跳轉(zhuǎn)到第一頁，而不能跳轉(zhuǎn)到當(dāng)前頁的問題
思路：
將當(dāng)前頁的頁碼currentPage存入session，然后點擊詳情跳轉(zhuǎn)到詳情頁面，然后，再次返回當(dāng)前頁的時候，在created生命周期里，獲取到存儲的currentPage，再進行加載
以上這篇Vue 列表頁帶參數(shù)進詳情頁的操作(router-link)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在前端開發(fā)中,卡片遮罩層是一種常見的交互設(shè)計元素,用于強調(diào)某個區(qū)域或內(nèi)容,并提供用戶操作的入口,本文將帶大家在?vue?中結(jié)合實際案例實現(xiàn)此功能,感興趣的朋友一起看看吧2024-08-08
這篇文章主要介紹了Vue項目配置在局域網(wǎng)下訪問方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
深入探究Vue2響應(yīng)式原理的實現(xiàn)及存在的缺陷
Vue的響應(yīng)式數(shù)據(jù)機制是其核心特性之一,它能夠自動追蹤數(shù)據(jù)的變化,并實時更新相關(guān)的視圖,然而,Vue2中的響應(yīng)式數(shù)據(jù)機制并非完美無缺,本文將探討Vue2響應(yīng)式原理及其存在的缺陷2023-08-08
這篇文章主要介紹了如何使用vue實現(xiàn)跨域訪問第三方http請求,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
本篇文章主要介紹了vue如何在自定義組件中使用v-model，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了 Vue press 支持圖片放大功能,本文通過代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
Vue render渲染時間戳轉(zhuǎn)時間,時間轉(zhuǎn)時間戳及渲染進度條效果
這篇文章主要介紹了Vue render渲染時間戳轉(zhuǎn)時間,時間轉(zhuǎn)時間戳及渲染進度條效果,通過實例代碼相結(jié)合的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-07-07
這篇文章主要介紹了vue項目打包之后接口出現(xiàn)錯誤的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
van-uploader保存文件到后端回顯后端接口返回的數(shù)據(jù)
前端開發(fā)想省時間就是要找框架呀,下面這篇文章主要給大家介紹了關(guān)于van-uploader保存文件到后端回顯后端接口返回的數(shù)據(jù),文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
dhtmlxGantt是一個強大的JavaScript Gantt圖表庫,提供易于使用、高度可自定義的Gantt圖表組件,它支持多項任務(wù)和進度條,以及多種列和行布局,可用于創(chuàng)建各種類型的時間線和計劃表,本文給大家介紹前端vue實現(xiàn)甘特圖的相關(guān)知識,感興趣的朋友跟隨小編一起看看吧2024-04-04