目前完成的功能：登录注册，商品分类的路由
GIF.gif
获取页面数据的思路：
一、定义api
打开api.js
Image 139.png
二、在productlist.vue页面创建时获取数据
打开productlist.vue
Image 140.png
三、编写mock.js
打开mock.js
Image 141.png
四、测试、修改
Image 142.png
可以看出来其实数据是回来了的，我先将数据渲染到页面上
打开productlist.vue
<template>
<div>
<h1>prolist</h1>
<p v-text="$route.params.class"></p>
<p>共{{productlist.length}}个商品</p>
<ul>
<li
v-for="(item, index) in productlist"
:key="item.productclass"
v-text="item.productname">
</li>
</ul>
</div>
</template>
<script>
import {GetProductList} from '../../../api/api'
export default {
data () {
return {
productlist: []
}
},
mounted () {
let params = null
if (this.$route.params.class === 'all') {
params = ''
} else {
params = this.$route.params.class
}
GetProductList(params).then(res => {
console.log(res)
this.productlist = res.data.productlist
})
}
}
</script>
效果
Image 144.png
看起来是成功了，但其实有个大问题
GIF.2gif.gif
我们点击分类切换，但实际上它并没有切换，这是因为我用的动态路由，切换路由的时候这个productlist.vue的页面并没有重建，自然也就没有重新生产mounted（），要解决这个问题有2个方法
1、使用watch()来监听this.$route.params.class的值，当这个值变化的时候就触发获取数据的方法
2、我们在这个页面<router-view></router-view>的地方绑定一个动态的：key，这个切换路由的时候它就会重建这个页面
我采用第二种办法，这样还可以加个过渡动画，而且更简单
打开product.vue
Image 143.png
Image 145.png
效果：
GIF3.gif
这样就可以真正的动态切换路由了
