一、页面跳转方式
- 在页面中有两种跳转方式,第一种跳转方式是
使用 a 标签的形式进行跳转,也称之为标签跳转。第二种跳转方式是使用 window.location.href 的形式进行跳转,也称之为编程式跳转。 - 在vue页面中,实现列表页跳转到详情页,也就有两种方式。第一种是标签式跳转,通过router-link的形式进行跳转。第二种是编程式跳转,通过 this.$router.push的形式进行跳转。
- this.$ route 和 this.$ router 的区别:
~ this.$route 是路由参数对象,所有路由中的参数, params, query 都属于它
~ this.router 是一个路由导航对象,用它可以方便的 使用 JS 代码,实现路由的前进、后退、跳转到新的 URL 地址
二、标签式跳转
- 在 vue 的列表页中,用 router-link 进行包裹起来,to 是跳转的路由,通过拼接详情页的 id 值就可以,代码如下所示:
<router-link :to="'/home/goodsInfo'+item.id" tag="div" class="goods-item" v-for="item in goodsList" :key="item.id">
<img :src="item.img_url" alt="">
<h1 class="title">{{ item.title }}</h1>
<div class="info">
<p class="price">
<span class="now">¥{{ item.sell_price }}</span>
<span class="old">¥{{ item.market_price }}</span>
</p>
<p class="sell">
<span>热卖中</span>
<span>剩{{ item.stock_quantity }}件</span>
</p>
</div>
</router-link>
- 在 router.js 文件中,在 path 路径中,拼接跳转的详情页 id 值,也是使用了路由懒加载,代码如下所示:
{
path: '/home/goodsInfo/:id',
name: 'GoodsInfo',
component: () => import('./components/goods/GoodsInfo.vue')
}
- 在详情页中,在 data 中,定义 id 值,id 的值为 this.$route.params.id,这个也是从列表页到详情页中获取到的对应的 id 值,将路由参数中的对象挂载到 id 上。定义 goodsInfo,默认为空对象,保存商品的信息数据,代码如下所示:
data() {
return {
id: this.$route.params.id,
goodsInfo: {},
}
}
- 在详情页中,在 created 生命周期钩子函数中,调用 getGoodsInfo() 方法,获取到商品的详情数据,代码如下所示:
created () {
this.getGoodsInfo()
}
- 在详情页中,在 methods 中,定义 getGoodsInfo 方法,获取商品的信息,调用相应的接口,拼接详情id,获取详情页的数据,并且将数据保存到 goodsInfo 中,代码如下所示:
getGoodsInfo() {
this.$http.get('api/goods/getinfo/' + this.id).then((res) => {
if (res.data.status === 0) {
this.goodsInfo = res.data.message[0]
}
})
}
- 在详情页中,渲染详情页的数据到页面上,代码如下所示:
<!-- 商品参数区域 -->
<div class="mui-card">
<div class="mui-card-header">商品参数</div>
<div class="mui-card-content">
<div class="mui-card-content-inner">
<p>商品货号:{{ goodsInfo.goods_no }}</p>
<p>库存情况:{{ goodsInfo.stock_quantity }}</p>
<p>上架时间:{{ goodsInfo.add_time | dateFormat}}</p>
</div>
</div>
<div class="mui-card-footer">
<mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
<mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
</div>
</div>
三、编程式跳转
- 在 vue 的列表页中,绑定一个 click 点击事件 goDetail(item.id),携带参数 id,代码如下所示:
<div @click="goDetail(item.id)" class="goods-item" v-for="item in goodsList" :key="item.id">
<img :src="item.img_url" alt="">
<h1 class="title">{{ item.title }}</h1>
<div class="info">
<p class="price">
<span class="now">¥{{ item.sell_price }}</span>
<span class="old">¥{{ item.market_price }}</span>
</p>
<p class="sell">
<span>热卖中</span>
<span>剩{{ item.stock_quantity }}件</span>
</p>
</div>
</div>
- 在 router.js 文件中,在 path 路径中,拼接跳转的详情页 id 值,也是使用了路由懒加载,同时,必须指明 name 的值,会用到命名路由,代码如下所示:
{
path: '/home/goodsInfo/:id',
name: 'GoodsInfo',
component: () => import('./components/goods/GoodsInfo.vue')
}
- 在列表页中,在 methods 中,定义 goDetail 这个方法,传入 id 值,通过 this.$router.push 进行路由导航跳转,name 的值就是跳转路由的 name 的值,也是之前在 router.js 中定义的命名路由,传递命令路由,params 就是传递的 id 值,代码如下所示:
// 点击后进入详情页
goDetail (id) {
this.$router.push({name: 'GoodsInfo', params: { id }})
}
- 在详情页中,在 data 中,定义 id 值,id 的值为 this.$route.params.id,这个也是从列表页到详情页中获取到的对应的 id 值,将路由参数中的对象挂载到 id 上。定义 goodsInfo,默认为空对象,保存商品的信息数据,代码如下所示:
data() {
return {
id: this.$route.params.id,
goodsInfo: {},
}
}
- 在详情页中,在 created 生命周期钩子函数中,调用 getGoodsInfo() 方法,获取到商品的详情数据,代码如下所示:
created () {
this.getGoodsInfo()
}
- 在详情页中,在 methods 中,定义 getGoodsInfo 方法,获取商品的信息,调用相应的接口,拼接详情id,获取详情页的数据,并且将数据保存到 goodsInfo 中,代码如下所示:
getGoodsInfo() {
this.$http.get('api/goods/getinfo/' + this.id).then((res) => {
if (res.data.status === 0) {
this.goodsInfo = res.data.message[0]
}
})
}
- 在详情页中,渲染详情页的数据到页面上,代码如下所示:
<!-- 商品参数区域 -->
<div class="mui-card">
<div class="mui-card-header">商品参数</div>
<div class="mui-card-content">
<div class="mui-card-content-inner">
<p>商品货号:{{ goodsInfo.goods_no }}</p>
<p>库存情况:{{ goodsInfo.stock_quantity }}</p>
<p>上架时间:{{ goodsInfo.add_time | dateFormat}}</p>
</div>
</div>
<div class="mui-card-footer">
<mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
<mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
</div>
</div>