Vue: 关于路由跳转

一. 关于路由跳转

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>