一. 关于路由跳转
1. 点击按钮触发, 返回上一层
<template>
<div class="goodsShow">
<h2>商品列表页</h2>
<button @click="goBackToDescend">返回上一层</button>
</div>
</div>
</template>
<script>
export default {
name: 'GoodsShow', // 组件名称
methods: {
goBackToDescend () {
this.$router.go(-1)
}
}
}
</script>
2. 组件与组件之间的 传参与接参
跳转到指定页面并传参
<template>
<div class="goodsShow">
<h2>商品列表页</h2>
</div>
</div>
</template>
<script>
export default {
name: 'GoodsShow', // 组件名称
methods: {
// 点击跳转到 category 商品分类页
goCategory (cid) {
this.$router.push({
path: '/Category',
query: {
cid: cid //此处可以省略, 直接写成 dic
}
})
},
}
}
</script>
3. 从其他页面跳转过来并接取参数
以下使用了 this.$set(target, key, value)
–> target:要更改的数据源(可以是对象或者数组, 一般情况下只会用到对象); key:要更改的具体数据; value:重新赋的值
<template>
<div class="category">
<h2>商品分类页</h2>
</div>
</div>
</template>
<script>
export default {
name: 'GoodsShow', // 组件名称
methods: {
// 接取从商品列表页传过来的参数
async productCondition ({ sortType, lowPrice, heiPrice }) {
const params = {
current: 1,
size: 10,
cid: this.$route.query.cid
}
// 做判断: 在商品分类页的分类与价格区间搜索 做出判断
if (sortType) {
this.$set(params, 'sortType', sortType)
}
if (lowPrice !== '' && heiPrice !== '') {
this.$set(params, 'lowPrice', lowPrice)
this.$set(params, 'heiPrice', heiPrice)
}
this.catalogDataList = await getProductCondition(params)
}
}
}
</script>