商品列表跳轉詳情頁（項目過程思路）

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

過程：首先改詳情頁的路由（goodsInfo下的index.js）

export default{
    path:"/goodsInfo/:id/:str",
    // path:"/goodsInfo",
    component:()=>import("views/goodsInfo"),
    name:"goodsInfo",
    props: true,
}

再就是配置，進行跳轉不同的路徑（因為是點擊跳轉，所以寫一個點擊響應事件）

以下為代碼

 (1)先點擊的時候傳遞商品的id和名稱給響應事件，

<div  @click="handleGo(index1,'蘋果')"></div>

(2)響應事件接收到事件。根據參數不同，跳轉不同的地址欄的頁面

handleGo(id,str){
          this.$router.push({name:"goodsInfo",params:{id,str}});

      },

（3）修改路由的寫法，寫為可以接受參數的動態路由的形式

export default{
    path:"/goodsInfo/:id/:str",
    // path:"/goodsInfo",
    component:()=>import("views/goodsInfo"),
    name:"goodsInfo",
    props: true,
}

到這里可以實現，點擊不同商品，可以看到地址欄的地址是不同的。

（4）接下來便是根據id的值修改取值的接口

先是接口修改為可以接受參數的形式

export const goodsInfo_api=(cityId=10)=>http("get","/api/goods/goods/detail",{cityId:cityId});

(5)在調用接口的時候對該函數進行復制，從而訪問不同的端口

1>如果在vue文件中，在created中就進行取數據。

importe {detail_api} from "api/movie"
async created(){
    let data=await detail_api(this.id);
}

2>如果在store文件中，則現需要先在vue文件的created中進行函數觸發

created() {
     this.handleGoodsInfo();     
   },

在store文件中進行取值

async handleGoodsInfo(){
        let data = await goodsInfo_api(this.str); 
        state.goodsInfo=data.data; 
        }

(6)最后可以根據從端口中取出值的不同渲染不同頁面。