商品列表跳轉詳情頁（項目過程思路）
總體思路：改路由為動態路由，動態的跳轉頁面；改接口為動態可以取值的接口，取不同數據渲染不同頁面。
過程：首先改詳情頁的路由（goodsInfo下的index.js）
1 export default{ 2 path:"/goodsInfo/:id/:str", 3 // path:"/goodsInfo", 4 component:()=>import("views/goodsInfo"), 5 name:"goodsInfo", 6 props: true, 7 }
再就是配置，進行跳轉不同的路徑（因為是點擊跳轉，所以寫一個點擊響應事件）
以下為代碼
(1)先點擊的時候傳遞商品的id和名稱給響應事件，
1 <div @click="handleGo(index1,'蘋果')"></div>
(2)響應事件接收到事件。根據參數不同，跳轉不同的地址欄的頁面
1 handleGo(id,str){ 2 this.$router.push({name:"goodsInfo",params:{id,str}}); 3 4 },
（3）修改路由的寫法，寫為可以接受參數的動態路由的形式
1 export default{ 2 path:"/goodsInfo/:id/:str", 3 // path:"/goodsInfo", 4 component:()=>import("views/goodsInfo"), 5 name:"goodsInfo", 6 props: true, 7 }
（4）接下來便是根據id的值修改取值的接口
先是接口修改為可以接受參數的形式
1 export const goodsInfo_api=(cityId=10)=>http("get","/api/goods/goods/detail",{cityId:cityId});
(5)在調用接口的時候對該函數進行復制，從而訪問不同的端口
1>如果在vue文件中，在created中就進行取數據。
1 importe {detail_api} from "api/movie" 2 async created(){ 3 let data=await detail_api(this.id); 4 }
2>如果在store文件中，則現需要先在vue文件的created中進行函數觸發
1 created() { 2 this.handleGoodsInfo(); 3 },
在store文件中進行取值
1 async handleGoodsInfo(){ 2 let data = await goodsInfo_api(this.str); 3 state.goodsInfo=data.data; 4 }
(6)最后可以根據從端口中取出值的不同渲染不同頁面。
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。