Heisenberg_P 2020-04-09 13:05 采纳率: 0%
浏览 968

关于element-ui中router-view出现样式重叠的问题

图片说明
在vue项目中,利用router-view进行单页面后台系统时,在router-view中出现了
样式重叠的问题
以下是router配置

let routes = [
  {
    path: '/',
    component: App,
    children: [
      {path: '/index', component: index, name: '首页'},
      {path: '/city', component: city, name: '城市管理'},
      {path: '/site', component: site, name: '站点管理'},
      {path: '/route', component: route, name: '线路管理'}
    ]
  }
];

以下是app.vue中的使用

<el-row class="container" style="height: 100%">
    <v-header></v-header>
    <el-col :span="24" class="main">
      <el-row>
        <el-menu :default-active="$route.path" class="mar-l el-menu-vertical-demo el-col el-col-3" light router>
          <template v-for="(item,index) in $router.options.routes[0].children" v-if="!item.hidden">
            <el-menu-item :index="item.path" ><i class="fa" :class="item.class"></i>{{item.name}}</el-menu-item>
          </template>
        </el-menu>
        <section class="contentCon">
        <el-col :span="21" :offset="3" class="content-wrapper">
          <transition>
            <router-view></router-view>
          </transition>
        </el-col>
      </section>
      </el-row>
    </el-col>
  </el-row>
  • 写回答

1条回答

  • 关注

    <router-view></router-view>会默认请求this.$router.push("/"),导致了重叠  你可以在mounted() {
            this.$router.push("/XX")
        }给他一个空白页面

    评论

报告相同问题?

悬赏问题

  • ¥100 关于使用MATLAB中copularnd函数的问题
  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗
  • ¥15 钢筋实图交点识别,机器视觉代码
  • ¥15 如何在Linux系统中,但是在window系统上idea里面可以正常运行?(相关搜索:jar包)
  • ¥50 400g qsfp 光模块iphy方案
  • ¥15 两块ADC0804用proteus仿真时,出现异常
  • ¥15 关于风控系统,如何去选择