el-tabs值修改时更新路由参数值

<template>
    <div class="my_case">
        <img src="../../../static/images/case_banner.jpg" class="wp1920"/>
        <!--Tab-start-->
        <el-tabs type="border-card"  v-model="typeId" @tab-click="handleClick">
            <el-tab-pane v-for="(item,index) in caseType" :key="index" :label="item.title" :name="item.id" >
                <img v-if="noData" src="../../../static/images/noData.png" class="noData" />
                <CaseList v-else :caseList="caseList" :typeId="typeId"></CaseList>
            </el-tab-pane>
        </el-tabs>
        <!--Tab-end-->
        <div class="wp">
            <!--分页-start-->
            <div class="fy block" style="margin: 0 auto; margin-bottom: 74px;">
                <el-pagination background :total="totalNum" :page-size="pageSize" @current-change="handleCurrentChange" layout="prev, pager, next, jumper">
                </el-pagination>
            </div>
            <!--分页-end-->
            <!--咨询-start-->
            <consult></consult>
            <!--咨询-end-->
        </div>
        <linian></linian>
    </div>
</template>

<script>
export default {
    data(){
        return {
            currentPage: 1,
            pageSize: 12,//每页显示几条
            totalNum: 0,//总页数
            startPage: 1,//起始页
            caseType: [],
            caseList: [],
            typeId: '0', //分类id
            noData: false//true表示暂无数据
        }
    },
    created() {
        this.getCaseType();
        this.typeId = this.$route.query.type;
        this.getCaseList(this.startPage);
    },
    methods: {
        handleCurrentChange(val) {
            this.getCaseList(val);
        },
        //获取案例下所有类型
        getCaseType() {
            this.$axios.post("/get_category_type",{
                "position_id": 2,
            }).then((response) => {
                let res = response.data;
                if(res.status == 1){
                    this.caseType = res.data;
                }else{
                    this.$layer.msg(res.message);
                }
            }).catch((err) =>{
                console.log(err);
            })
        },
        //点击tab项切换显示内容列表
        handleClick(tab) {
            this.typeId = tab.name;
            this.getCaseList(this.startPage);
            //切换tab页时更新路由参数
            this.$router.push({path:'/case?type=' + this.typeId});
        },
        //获取分类下案例列表
        getCaseList(startPage) {
            this.$axios.post("/get_cate_article_all",{
                "position_id": 2, 
                "type_id": this.typeId,
                "page": startPage,
                "per_page": this.pageSize
            }).then((response) => {
                let res = response.data;
                console.log(this.caseList);
                if(res.status == 1){
                    this.caseList = res.data.data;
                    if(this.caseList.length == 0){
                        this.noData = true;
                    }else{
                        this.noData = false;
                    }
                    this.totalNum = res.data.total;
                }else{
                    this.$layer.msg(res.message);
                }
            }).catch((err) =>{
                console.log(err);
            })
        }
    },
    watch: {
        $route(){
            this.typeId = this.$route.query.type;
        },
        typeId() {
            //获取案例列表信息
            this.getCaseList(this.startPage);
        },
    }
}</script>

<style>
.noData {
    display: block;
    width: 226px;
    height: 192px;
    margin: 80px auto;
}
.el-tabs--border-card>.el-tabs__content {
    padding: 15px 0 !important;
}


</style>

标签：el,getCaseList,typeId,tabs,res,startPage,type,data,参数值
来源： https://www.cnblogs.com/duanzhenzhen/p/11089418.html