javascript - vue路由变化后，fetchData执行后，数据变化，页面没有渲染

问题描述

问 题

路由改变后，左侧导航栏的属性值变化，页面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';
            }
        }

这篇关于javascript - vue路由变化后，fetchData执行后，数据变化，页面没有渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！