商品列表跳转详情页(项目过程思路)

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

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

 

posted @ 2019-08-08 19:16  木子世界  阅读(3731)  评论(0编辑  收藏  举报