element-ui 初次访问页面导航菜单默认高亮激活

最新推荐文章于 2023-11-21 01:45:56 发布

小笨蛋和小戏精

最新推荐文章于 2023-11-21 01:45:56 发布

阅读量5.1k

点赞数 4

文章标签： vue.js

本文链接：https://blog.csdn.net/Fabbom/article/details/105103179

版权

element-ui 导航菜单默认激活

今天遇到一个和element-ui导航菜单有关的问题
那就是如何在初次访问页面时使某个导航菜单选项为激活状态

我这一进去就是首页页面，所以首页这个选项应该是高亮的
在这里插入图片描述
我的代码：
html：

<el-menu :default-active="activePath" :router="true" class="el-menu-vertical-demo"
                        active-text-color="#027aff">
                        <!-- 首页 -->
                        <el-menu-item :index="menuPath.page" @click="setItemPath(menuPath.page)">
                            <template slot="title">
                                <i class="el-icon-s-home"></i>
                                <span>首页</span>
                            </template>
                        </el-menu-item>
                        <!-- 功能一级菜单 -->
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="iconfont icon-jurassic_apply"></i>
                                <span>功能</span>
                            </template>
                            <!-- 二级菜单 -->
                            <el-menu-item-group>
                                <el-menu-item :index="menuPath.data" @click="setItemPath(menuPath.data)">
                                    <template slot="title">
                                        <i class="el-icon-s-data"></i>
                                        <span>数据中心</span>
                                    </template>
                                </el-menu-item>
                                <el-menu-item :index="menuPath.message" @click="setItemPath(menuPath.message)">
                                    <template slot="title">
                                        <i class="iconfont icon-liuyan-fill"></i>
                                        <span>留言箱</span>
                                    </template>
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <!-- 项目管理 -->
                        <el-menu-item :index="menuPath.project" @click="setItemPath(menuPath.project)">
                            <template slot="title">
                                <i class="iconfont icon-zhongchuangkongjian-"></i>
                                <span>项目管理</span>
                            </template>
                        </el-menu-item>
                    </el-menu>

data：

data() {
            return {
                // 页面路径数据
                menuPath: {
                    page: '/page',
                    data: '/data',
                    message: '/message',
                    project: '/project'
                },
                // 当前页面的路径
                activePath: '/page',
            }
        },

methods:

methods: {
            goBack() {
                console.log('go back')
            },
            // 将当前选项页面保存至session中
            setItemPath(activePath) {
                this.activePath = activePath
                window.sessionStorage.setItem('activePath', activePath)
            }
        },
        // 在初始化时取出以保存的页面路径
        created() {
            this.activePath = window.sessionStorage.getItem('activePath')
        }

我是通过在sessionStorage里保存当前激活的路径，然后在点击选项卡时将最新路径保存到sessionStorage中，且同步到activePath，以达到在切换页面时选项卡会相应的高亮。
但是这样做并不能达到我想要的效果。
然后在看了其他人的博客后发现，通过 $router.path 可以达到我想要的效果。
再次重新启动项目：
在这里插入图片描述
代码：
HTML

<el-menu :default-active="$router.path" :router="true" class="el-menu-vertical-demo"
                        active-text-color="#027aff">
                        <!-- 首页 -->
                        <el-menu-item :index="menuPath.page">
                            <template slot="title">
                                <i class="el-icon-s-home"></i>
                                <span>首页</span>
                            </template>
                        </el-menu-item>
                        <!-- 功能一级菜单 -->
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="iconfont icon-jurassic_apply"></i>
                                <span>功能</span>
                            </template>
                            <!-- 二级菜单 -->
                            <el-menu-item-group>
                                <el-menu-item :index="menuPath.data">
                                    <template slot="title">
                                        <i class="el-icon-s-data"></i>
                                        <span>数据中心</span>
                                    </template>
                                </el-menu-item>
                                <el-menu-item :index="menuPath.message">
                                    <template slot="title">
                                        <i class="iconfont icon-liuyan-fill"></i>
                                        <span>留言箱</span>
                                    </template>
                                </el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <!-- 项目管理 -->
                        <el-menu-item :index="menuPath.project">
                            <template slot="title">
                                <i class="iconfont icon-zhongchuangkongjian-"></i>
                                <span>项目管理</span>
                            </template>
                        </el-menu-item>
                    </el-menu>

因为在切换页面时， $router.path 会自动随着页面而改变路径，所以就不需要@click事件了，直接设置
:default-active="$router.prath"就可以了
然后就只需要在页面初始化时将 $router.path 值设为首页的路径就可以了

// 在初始化时取出以保存的页面路径
        created() {
            this.$router.path = '/page'
        }

$router为当前router跳转对象里面可以获取name、path、query、params等。
以上就是本次博客的全部内容了（第二次写博客哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈)