Vue脚手架-嵌套路由（vue路由嵌套,配置children嵌套路由）

Vue CLI工程是单页面的，为了保证能显示各式各样的页面，则需要将页面的整个区域都设计为<router-view/>，然后根据URL不同，加载不同的视图组件（.vue文件）。即使将整个页面的显示区域作为一个<router-view/>，多个页面仍可能存在共用的部分，例如：

如果要设计为以上风格，则页面中的右侧最大的区域也必须是一个 <router-view/>，就会形成最外部（页面所有部分）是<router-view/> 的同时，内部还有一个<router-view/>（右侧的大区域），在配置路由时，就需要使用到嵌套路由的做法了。

嵌套路由的使用方式

在router/index.js中，传统路由的配置大致是：

const routes = [ 
  {
    path: '/', component: HomeView 
  },
  { 
    path: '/about', 
    component: () => import('../views/AboutView.vue') 
  }];

而嵌套路由则需要在原路由的某对象中添加children属性，此属性仍是一个数组，其内部的配置方式与routes常量是相同的，例如：

const routes = [ 
  { 
    path: '/admin', 
    component: () => import('../views/AdminView.vue'), 
    children: [
      { 
        path: 'user/list' ,
        component: () => import('../views/admin/UserListView.vue')
      },
      { 
        path: 'user/add-new' ,
        component: () => import('../views/admin/UserAddNewView.vue') 
      } ] 
  } ];

【提示】以上children下的配置中，各path没有使用/作为第1个字符，则表示在父级路径的基础上增加，例如配置为user/list，由于父级配置了 /admin，则完整路径为/admin/user/list。

如果希望访问子级嵌套的视图（例如以上/admin对应的视图）时就打开某个其子级视图（例如以上/admin/user/list对应的视图），在配置存在子级的视图（例如以上/admin对应的视图）时，还可以添加 redirect属性，使其直接重定向到子级视图，例如：

const routes = [ 
  // 省略前序代码 
  { 
    path: '/admin', 
    redirect: '/admim/user/list', 
    component: () => import('../views/AdminView.vue'), 
    children: [ // 省略子级代码 ] 
      } 
    ];

嵌套路由Demo

//APP.vue 文件
<template>
  <div id="app">
    <router-view/>
    </div>
</template>

<style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: #2c3e50;
    }
</style>

//路由 index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import LoginView from '../views/LoginView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: LoginView,
    meta: {
      title: '用户登录'
    }
  },
  {
    path: '/admin',
    redirect: '/admin/user/list',
    component: () => import('../views/AdminView.vue'),
    children: [
      {
        path: 'user/list', // /admin/user/list
        component: () => import('../views/admin/UserListView.vue'),
        meta: {
          title: '用户列表'
        }
      },
      {
        path: 'user/add-new', // /admin/user/add-new
        component: () => import('../views/admin/UserAddNewView.vue'),
        meta: {
          title: '增加用户'
        }
      }
    ]
  }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
//作用是根据名称 修改每个路由自己的名称
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})
export default router

//AdminView.vue文件
<template>
<div>
  <!-- 整个后台管理页面的容器，内部为上下结构 -->
  <el-container>
  <!-- 上下结构的上半部分 -->
  <el-header class="layout-header">
    <h3>这是上半部分</h3>
</el-header>
<!-- 上下结构的下半部分 -->
<el-container class="layout-body">
  <!-- 下半部分的左侧结构 -->
  <el-aside class="layout-aside">
    <el-menu
router
class="el-menu-vertical-demo"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
  <el-submenu index="/admin">
    <template slot="title">
      <i class="el-icon-location"></i>
<span>用户管理</span>
</template>
<el-menu-item index="/admin/user/add-new">
  <i class="el-icon-location"></i>
<span>增加用户</span>
</el-menu-item>
<el-menu-item index="/admin/user/list">
  <i class="el-icon-location"></i>
<span>用户列表</span>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<!-- 下半部分的右侧结构 -->
<el-main>
    <router-view/>
    </el-main>
</el-container>
</el-container>
</div>
</template>

<style>
    * { margin: 0; }
    .layout-header { background: #2c3e50; color: #fff;}
.layout-body { position: absolute; top: 60px; bottom: 0; left: 0; right: 0; }
.layout-aside { background: dimgray; color: #fff; }
</style>

//admin文件夹

//UserAddNewView.vue
<template>
  <div>
    <h3>这是增加用户页面</h3>
  </div>
</template>
//UserListView.vue
<template>
  <div>
    <h3>这是用户列表页面</h3>
  </div>
</template>

小结

通过以上内容的学习，你应该能够：

– 理解Vue CLI的单页面设计思想
– 掌握安装Node.js、配置npm源、安装Vue CLI、创建Vue CLI工程、在Vue CLI工程中安装常用框架
– 你应该自已做一些笔记，把相关的命令及注意事项记下来，而不是死记硬背
– 认识Vue CLI的工程的目录结构
– 掌握.vue视图组件的基本开发（认识此类文件的结构及特点）
– 掌握Vue CLI中路由的配置 包括一般路由和嵌套路由
– 能从Element UI官网或相关网站找到你所需的（或相似的）页面设计，并处理成你需要的样子（永远不要死记硬背标签、属性等，而是应该尽可能多的使用各种标签，了解它们的特点，并结合官方文档去使用，从而积累经验 – 掌握使用axios发送请求，并处理响应的结果）
至此，你已经完成了Vue CLI的入门学习，你应该在此基础之上，尝试设计更多不同的页面，并逐步细化，以发现更多的不足并解决它们，从而提升前端工程的开发能力。

学习记录，如有侵权请联系删除

网站首页 > 技术文章正文

猜你喜欢

网站首页 > 技术文章 正文

Vue脚手架-嵌套路由（vue路由嵌套,配置children嵌套路由）

猜你喜欢

网站首页 > 技术文章正文