el-menu写导航栏

使用el-menu写导航栏，刷新页面时不会失去高亮

element的菜单结构

    
    
        
        
            
            {{ item.lable }}
        
        
        
            
            
                
                
                    
                    {{ subItem.lable }}
                
            
        
    

 导航栏部分

data() {
        return {
            //默认高亮菜单
            currentActive: '',
            //菜单栏
            menu: [
                {path: "/home",name: "home",lable: "首页",icon: "s-home",},
                {
                    lable: "菜单2",
                    icon: "s-operation",
                    children: [
                        {path: "/menu1",name: "menu1",lable: "菜单2.1",icon: "s-operation",},
                        {path: "/menu2",name: "menu2",lable: "菜单2.2",icon: "s-operation",},
                    ]
                },
                {
                    lable: "菜单3",
                    icon: "s-operation",
                    children: [
                        {path: "/menu3",name: "menu3",lable: "菜单3.1",icon: "s-operation",},
                    ],
                },
            ],
        };
    },

用到的方法  主要是获取当前页面的路由

//在页面刷新时获取当前页面的路由
    created() {
        this.selectRoutePath()
    },
    methods: {
        //点击菜单通过name属性跳转路由
        clickMenu(item) {
            this.$router.push({ name: item.name });
        },
        //把当前的路由赋值给currentActive
        selectRoutePath() {
            this.currentActive = this.$route.path
        }
    },
    //使用watch来监视$route
    watch: {
        $route() {
            this.selectRoutePath()
        }
    },
    //过滤器筛选出有子菜单的菜单 和 没有子菜单的菜单
    computed: {
        noChildren() {
            return this.menu.filter((item) => !item.children);
        },
        hasChildren() {
            return this.menu.filter((item) => item.children);
        }
    },

这就是刷新页面也可以保持高亮的导航栏啦（路由应该会吧，嗯，行）