精华内容
下载资源
问答
  • 路由嵌套

    2021-02-03 17:05:38
    路由嵌套(前提是要构建过Vue与ElmentUI上一篇文章) 路由嵌套其实也不难,其实就像是组件搭积木一样,我们把小路由放在大路由上面就可以了。然后重新搭建一下Header也就是首页(老师里面的Main文件) 代码(Header....

    路由嵌套(前提是要构建过Vue与ElmentUI上一篇文章

    路由嵌套其实也不难,其实就像是组件搭积木一样,我们把小路由放在大路由上面就可以了。然后重新搭建一下Header也就是首页(老师里面的Main文件)

    代码(Header.vue)

    <template>
      <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
          <el-menu :default-openeds="['1', '3']">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-message"></i>用户管理
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1">
                  <router-link to="/user/profile">个人信息</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                  <router-link to="/user/list">用户列表</router-link>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-menu"></i>内容管理
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1">分类管理</el-menu-item>
                <el-menu-item index="2-2">内容列表</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
    
          </el-menu>
        </el-aside>
    
        <el-container>
          <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
              <i class="el-icon-setting" style="margin-right: 15px"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-header>
    
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </template>
    
    <style>
      .el-header {
        background-color: #b3c0d1;
        color: #333;
        line-height: 60px;
      }
    
      .el-aside {
        color: #333;
      }
    </style>
    
    <script>
      export default {
        name:"Header"
      };
    </script>
    

    代码(index.js)

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Login from "../view/Login";
    import Header from "../view/Header";
    import Profile from "../view/user/Profile";
    import List from "../view/user/List";
    
    Vue.use(VueRouter);
    
    
    export default new VueRouter({
      routes:[
        {
          path:'/login',
          component:Login,
    
        },
        {
          path: '/main',
          component: Header,
          children:[
            {
              path:'/user/profile',
              component:Profile
            },
            {
              path:'/user/list',
              component:List
            }
          ]
        }
      ]
    })
    
    展开全文
  • 路由嵌套项目.rar

    2019-12-29 22:13:33
    路由嵌套项目路由嵌套项目路由嵌套项目路由嵌套项目路由嵌套项目路由嵌套项目路由嵌套项目路由嵌套项目路由嵌套项目路由嵌套项目路由嵌套项目路由嵌套项目路由嵌套项目
  • 主要介绍了vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了详解vue路由篇(动态路由、路由嵌套),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要给大家介绍了vue 2.0路由之路由嵌套的相关资料,文中给出了详细的示例代码供大家参考学习,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,051
精华内容 1,620
关键字:

路由嵌套