Vue-路由嵌套

最新推荐文章于 2024-02-05 23:35:20 发布

原创最新推荐文章于 2024-02-05 23:35:20 发布 · 199 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

Vue 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何使用Vue和Element UI框架创建用户列表和个人信息组件，并在主页面中设置菜单导航，实现路由嵌套。通过实例演示了前端组件开发与路由管理的基础应用。

一、沿用上一篇博客“vue+elementUI”项目

二、编写List.vue和Profile.vue组件

List.vue:

<template>
    <h1>用户列表</h1>
</template>

<script>
    export default {
        name: "UserList"
    }
</script>

<style scoped>

</style>

Profile.vue:

<template>
    <h1>个人信息</h1>
</template>

<script>
    export default {
        name: "UserProfile"
    }
</script>

<style scoped>

</style>

三、修改Main.vue

<template>
<div>
<el-container>
  <el-aside width="200px">
    <el-menu :default-openeds="['1']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-caret-right"></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-caret-right"></i>内容管理</template>
        <e1-menu-item-group>
          <el-menu-item index="2-1">分类管理</el-menu-item>
          <el-menu-item index="2-2">内容列表</el-menu-item>
        </e1-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>
  </div>
</template>

<script>
  export default {
    name: "Main"
  }
</script>

<style scoped>
    .el-header {
      background-color: #89d0d1;
      color: #333;
      line-height: 60px;
    }

    .el-aside {
      color: #333;
    }
</style>

四、嵌套路由

import Vue from 'vue'
import Router from 'vue-router'

import Main from '../views/Main'
import Login from '../views/Login'

import UserList from '../views/user/List'
import UserProfile from '../views/user/Profile'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main,//嵌套路由
      children: [
        {path: '/user/profile',component: UserProfile},
        {path: '/user/list',component: UserList}
      ]
    },{
      path: '/login',
      component: Login
    }
  ]
});