商品列表跳轉詳情頁(項目過程思路)


總體思路:改路由為動態路由,動態的跳轉頁面;改接口為動態可以取值的接口,取不同數據渲染不同頁面。

過程:首先改詳情頁的路由(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刪除。



 
粵ICP備18138465號   © 2018-2022 CODEPRJ.COM