【element-ui】vue路由变化后，fetchData执行后，数据变化，页面没有渲染

• Z时代
• 2024-01-10
• 分类：技术分享

路由改变后，左侧导航栏的属性值变化，页面elementUi没有渲染,home对应导航1，sub对应导航2，修改navIndex值，页面没有变化

<template>
    <el-row class="tac">
        <el-col :span="18">
                <el-menu :default-active="navIndex" class="el-menu-vertical-demo">
                <router-link to="/home"><el-menu-item index="1">导航一</el-menu-item></router-link>
                <router-link to="/sub"><el-menu-item index="2">导航二</el-menu-item></router-link>
                <el-menu-item index="3">导航三</el-menu-item>
                </el-menu>
        </el-col>
      </el-row>
</template>
<script>
    import {mapGetters, mapActions} from 'vuex'
    console.log(this.router);
    export default {
        mounted(){
            var curRouter =  this.$route.path.slice(1);
            console.log(curRouter);
            if(curRouter=='home'){
                this.navIndex ='1';
            }
            if(curRouter=='sub'||curRouter=='edit'){
                this.navIndex ='2';
            }
        },
    data(){
        return {
            navIndex:"1",
        }
    },
    watch:{
        '$route': 'fetchData',
    },
    methods:{
        fetchData:function(){
            var curRouter =  this.$route.path.slice(1);
            console.log(curRouter);
            if(curRouter=='home'){
                this.navIndex ='1';
                this.$store.dispatch('router1');    
            }
        }
    },
}

回答：

新手不说了，自己解决了。fetchData:function(){}少了另一种情况判断。

    fetchData:function(){
            var curRouter =  this.$route.path.slice(1);
            console.log(curRouter);
            if(curRouter=='home'){
                this.navIndex ='1';
                this.$store.dispatch('router1');    
            }
            if(curRouter=='sub'||curRouter=='edit'){
                this.navIndex ='2';
            }
        }

以上是 【element-ui】vue路由变化后，fetchData执行后，数据变化，页面没有渲染 的全部内容， 来源链接： utcz.com/a/153139.html