美文网首页
vue左侧公共导航栏,从A页面跳转到B页面,左侧导航栏没刷新,右

vue左侧公共导航栏,从A页面跳转到B页面,左侧导航栏没刷新,右

作者: demoxjl | 来源:发表于2020-03-26 16:31 被阅读0次

在导航栏页面添加watch,监听路由变化


    export default {

        data(){

            return {

                activeKey: this.$route.path,

            };

        },

        computed: {

                menuList() {

                //从vuex获取菜单列表

                return this.$store.state.menuList;

                }

        },

        mounted() {

                this.init();

        },

        created(){

                this.activeKey = this.$route.path;

        },

        methods: {

        init(){

                //初始化时,通过Vuex的action请求数据

                this.$store.dispatch('getMenuList');

        },

        handleSelect(key, keyPath) {

                this.$nextTick(() => {

                    this.$router.push(key);

                    this.activeKey = key;

                })

        }

    },

        //路由跳转时,检测变化

        watch:{

                '$route': function(to, from) {

                    this.activeKey = to.path;

                }

        }

相关文章

网友评论

      本文标题:vue左侧公共导航栏,从A页面跳转到B页面,左侧导航栏没刷新,右

      本文链接:https://www.haomeiwen.com/subject/bkvcuhtx.html