商品列表跳转详情页（项目过程思路）

总体思路：改路由为动态路由，动态的跳转页面；改接口为动态可以取值的接口，取不同数据渲染不同页面。

过程：首先改详情页的路由（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)最后可以根据从端口中取出值的不同渲染不同页面。