Vue的Route

最新推荐文章于 2024-11-02 08:58:20 发布

萌新咦～

最新推荐文章于 2024-11-02 08:58:20 发布

阅读量43

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_58081244/article/details/132912847

版权

文章讨论了解决Vue应用中首页渲染两次的问题，提出使用`<router-view>`时避免与根页面冲突，并推荐使用`redirect`重定向到首页。同时，详细介绍了如何配置动态菜单，确保`el-menu`和`el-submenu`的正确联动。

摘要由CSDN通过智能技术生成

1.关于首页渲染两次的问题

你的main.js里引入的页面不能和根页面是一个，即main.js有一个页面，你在那个页面使用了<router-view></router-view>，它会去根页面找到一个页面进行加载到里面。

另外对于根页面建议使用redirect进行重定向你要加载的首页

const routes = [
  {
    path: '/',
    redirect: '/index',
    children: [
      {
        path: 'index',
        component: () => import('@/views/indexView.vue')
      }
    ]
  },
  // 错误页面重定向
  {
    path: '*',
    redirect: '/404'
  },
  {
    path: '/404',
    component: () => import('@/views/component/404View.vue')
  }
]

2.关于动态菜单的问题

el-menu 标签要有router属性，如果想要单个菜单打开 :unique-opened=true属性，并且确保你的el-submenu标签的：index的值唯一，不能为空

<el-menu 
              router
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                :unique-opened=true
                
                >
                  <template v-for="m1 in array" >
                        <el-submenu v-if="m1.children" :key="m1.id" :index="m1.id">
                          <span slot="title">
                            <i class="el-icon-setting"></i>
                            {{ m1.menuName }}
                          
                          </span>
                          <el-menu-item v-for="m2 in m1.children" :key="m2.id" :index="m2.path">
                          
                          <span slot="title">
                            <i class="el-icon-setting"></i>
                            {{ m2.menuName }}
                          </span>
                        </el-menu-item>
                        </el-submenu>
                        <el-menu-item v-else :key="m1.id" :index="m1.path">
                          
                          <span slot="title">
                            <i class="el-icon-setting"></i>
                            {{ m1.menuName }}
                          
                          </span>
                         
                        </el-menu-item>
                  </template>
              </el-menu>