账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue-router嵌套问题
    • 2020-01-01 00:00
    • 10
    20
    0

    /bgManagement/monitorBallPdt对应的页面中的<router-view>未匹配到,页面显示为空,主要代码如下:

    App.vue

    <template>
      <div id="app">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </div>
    </template>
    
    <style lang="less">
    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      #app {
        width: 100%;
        height: 100%;
      }
    }
    </style>
    router.js
    import Vue from 'vue'
    import Router from 'vue-router'
    import index from '../views/index.vue'
    import gisPlatform from '../views/gisPlatform.vue'
    import bgManagement from "@/views/bgManagement/index"
    import monitorBallPdt from "@/views/bgManagement/monitorBallPdt/monitorBallPdt"
    import monitorPolice from "@/views/bgManagement/monitorPolice/monitorPolice"
    
    Vue.use(Router)
    
    export default new Router({
      mode: 'hash',
      base: process.env.BASE_URL,
      routes: [
        {
          path: '/',
          name: 'index',
          components: {
            default: index
          }
        },
        {
          path: '/gisPlatform',
          name: 'gisPlatform',
          components: {
            default: gisPlatform
          }
        },
        {
          path: '/bgManagement/monitorBallPdt',
          name: 'bgManagement',
          components: {
            default: bgManagement,
            "management": monitorBallPdt
          }
        },
        {
          path: '/bgManagement/monitorPolice',
          name: 'monitorPolice',
          components: {
            default: bgManagement,
            "management": monitorPolice
          }
        }
      ]
    })
    
    bgManagement/index.vue
    <template>
        <div id="bgm">
            <el-container style="height: 100%;">
                <el-header style="background-color:#252525;">
                    <banner></banner>
                </el-header>
                <el-container>
                    <el-aside width="200px" style="background-color: #35373F;">
                        <el-menu
                            :default-active="indexActive"
                            @select="select"
                            class="el-menu-vertical-demo"
                            background-color="#35373F"
                            text-color="#fff"
                            active-text-color="#fff"
                            :router="true"
                        >
                            <el-menu-item index="/bgManagement/monitorBallPdt">
                                <i class="iconfont iconerji-yingyonggailan"></i>
                                <span slot="title">绑定人员</span>
                            </el-menu-item>
                            <el-menu-item index="/bgManagement/monitorPolice">
                                <i class="iconfont iconerji-yingyonggailan"></i>
                                <span slot="title">绑定设备</span>
                            </el-menu-item>
    
                        </el-menu>
                    </el-aside>
                    <el-main>
                        <keep-alive>
                            <router-view name="management"></router-view>
                        </keep-alive>
                    </el-main>
                </el-container>
            </el-container>
        </div>
    </template>
    
    <script>
    import banner from './banner'
    
    export default {
        data(){
            return {
                indexActive: '/bgManagement/monitorBallPdt'
            }
        },
        components: {
            banner
        },
        methods: {
            
        }
    }
    </script>
    
    <style lang="less" scope>
    #bgm{
        width: 100%;
        height: 100%;
        .is-active{
            background-color: #009688 !important;
        }
    }
    </style>
    
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • AI智能解答 超级管理员 2023-04-06 12:041楼
      ``` ```
    • AI智能解答 超级管理员 2023-04-06 12:032楼
      ``` ```
    • AI智能解答 超级管理员 2023-04-06 11:593楼
      ``` ```
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部