vue跳转带参数---【购物商城项目】(2020.3.13)

vue基础，路由跳转带参数，第一次记录

回忆提示：

：这里所有的后台数据都来自接口，接口地址：https://www.showdoc.cc/veblen?page_id=3372089088105270
商品一级分类跳转到各个分类的详情页面
一级分类HTML

<span v-bind:key="index" v-for="(one_type,index) in goods_type" class="goods_type" @click="turn_to_type(one_type)">
	<el-button round style="height: 30px; width: 100px; line-height: 5px;">{{one_type}}</el-button>
</span>

一级分类script

methods: {
			turn_to_type: function(e) {
				// console.log(e);
				this.$router.push('/list/' + e)
			}
		},

VUE路由

import list from "../views/list";
{
	path:'/list/:type',
	name:"List",
	component: list
},

分类详情页面script

<script>
    import axios from 'axios'
    import Goods_types from "../components/goods_types";
    import Turn_to_top from "../components/turn_to_top";
    export default {
        name: "list",
        components: {Turn_to_top, Goods_types},
        data(){
          return{
              goods_list:[]
          }
        },
        methods:{
            get_goods_list: function (e) {
				console.log(e);
                const self=this;
                axios.get('http://vebcoder.cn/api/goodList', {
                    params: e
                    //参数e就是所求
                }).then(
                    function (response) {
                        // console.log(response.data)
                        self.goods_list=response.data;
                        // this.$forceUpdate()
                    }
                )
            },
			to_details: function(e) {
				this.$router.push('/details/'+e)
			}
        },
        mounted() {
            // console.log(this.$route.params.type)

            this.get_goods_list({"type_one":this.$route.params.type})
        },
        watch:{
            $route:function () {
                this.get_goods_list({"type_one":this.$route.params.type})
            }
        }
    }
</script>