商品列表跳转详情页(项目过程思路)
总体思路:改路由为动态路由,动态的跳转页面;改接口为动态可以取值的接口,取不同数据渲染不同页面。
过程:首先改详情页的路由(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)最后可以根据从端口中取出值的不同渲染不同页面。