vue项目头部路由，侧边栏路由联动问题

最新推荐文章于 2024-08-17 22:36:14 发布

qq_41588568

最新推荐文章于 2024-08-17 22:36:14 发布

阅读量6.6k

点赞数 5

分类专栏：前端文章标签： vue头部与侧边栏路由

本文链接：https://blog.youkuaiyun.com/qq_41588568/article/details/105111418

版权

本文介绍了如何在Vue项目中实现头部菜单与侧边栏路由的联动，当点击头部菜单时，侧边栏相应地切换内容。同时，通过设置数据和计算属性确保页面刷新后能保持之前菜单的状态不变。详细讨论了layout/index.vue和Sidebar/index.vue组件的数据和计算属性实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

菜单效果：头部四个大的菜单，点击头部每个菜单，对应切换左侧菜单栏，点击浏览器刷新，刷新页面的同时保持各个菜单的状态不变

头部四个菜单layout/index.vue：

data部分：

data() {
  return {
    index: '1',  //默认进去为首页
    //activeIndex2: '1',
  }
},

计算属性部分：

computed: {
  activeIndex2() {
    //console.info(this.$route.path.split('/'))
    // 刷新页面后根据路由动态改变头部选中菜单
    if (this.$route.path.split('/')[1] == 'dashboard') {
      //动态改变index,使刷新后侧边栏的路由始终和头部路由保持一致，否则每次刷新侧边栏默认会是首页对应的侧边栏，因为我们在data中设置index的默认值是"1"