在一个页面中如果想实现三个页面的拼接组成一个页面，这时候就用到嵌套路由了。
第一种方法：
1.顶部页面 /views/Home.vue
<template>
<el-container>
<!-- 顶部 -->
<el-header class="headerAll">
<div class="headImage"></div>
<!-- <img src=""
class="headImage"> -->
<el-menu :default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
background-color="#222a30"
text-color="#fff"
active-text-color="#29e2fe"
@select="handleSelect">
<el-menu-item v-for="(item, index) in menuList"
:key="index"
:index="item.index"
v-on:listenToChildEvent="menuClick">{{item.name}}</el-menu-item>
</el-menu>
<el-dropdown>
<img src="../assets/headImage.jpg"
class="drophead" />
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
<!-- 跳转下左侧栏 menuSecond -->
<router-view />
</el-container>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
components: {}
})
export default class Home extends Vue {
data() {
return {
activeIndex: "1",
menuList: [
{
name: "首页",
index: "1",
link: ""
},
{
name: "车队基本信息",
index: "2",
link: ""
},
{
name: "车队业务/交易管理",
index: "3",
link: ""
},
{
name: "车队风险信息",
index: "4",
link: ""
},
{
name: "车辆保险信息",
index: "5",
link: ""
},
{
name: "车队估值/风险",
index: "6",
link: ""
},
{
name: "车队财资",
index: "7",
link: ""
},
{
name: "车队信贷",
index: "8",
link: ""
}
]
};
}
private handleSelect(key: any, keyPath: any) {
switch (key) {
case "1":
this.$router.push({ path: "/" });
break;
case "4":
this.$router.push({ path: "/menuSecond/1" });
break;
default:
break;
}
}
menuClick(data: any) {
this.$router.push(data);
}
}
</script>
<style lang="scss">
.headerAll {
background: #222a30;
margin-bottom: 20px;
.headImage {
width: 150px;
height: 100%;
border: 0;
}
.drophead {
width: 40px;
height: 40px;
border-radius: 50%;
}
}
</style>2.左侧栏页面 view/menuSecond.vue
<template>
<el-container class="menuSecond">
<!-- 左侧栏 -->
<el-aside width="200px"
class="asideClass">
<el-menu :default-active="defaultActive"
class="el-menu-vertical-demo"
active-text-color="#303133"
@select="handleSelect">
<el-menu-item v-for="(item, index) in filesList.navigeList"
:key="index"
:index="item.index">
<span slot="title">{{item.name}}</span>
</el-menu-item>
</el-menu>
</el-aside>
<!-- 跳转右侧栏 menuThird -->
<router-view />
</el-container>
</template>
<script lang="ts">
import Vue from "vue";
import files from "../jsonFile";
export default Vue.extend({
data() {
return {
filesList: files,
selectIndex: 0,
defaultActive: "1",
currentPage4: 4
};
},
methods: {
handleSelect(key: String) {
this.selectIndex = Number(key) - 1;
}
}
});
</script>
<style lang="scss">
.menuSecond {
background: #f7f7f7;
margin: 0 10px;
.menuSecondRight {
background: #fff;
margin-left: 10px;
.menuSecondH3 {
margin-bottom: 40px;
}
}
.el-pagination {
margin-top: 30px;
float: right;
}
.signTypeColor {
color: #d40707;
}
}
.el-menu {
background: #fff;
}
</style>3.右侧栏页面 view/menuThird.vue
<template>
<el-container class="menuSecond">
<el-main class="menuSecondRight">
<h3 class="menuSecondH3">{{filesList.navigeList[this.selectIndex].name}}</h3>
<el-table :data="tableData"
border
stripe
style="width: 100%">
<el-table-column type="index"
label="序号"
width="70"
align="center">
</el-table-column>
<el-table-column prop="name"
label="姓名"
width="110"
align="center" />
<el-table-column prop="cardId"
label="身份证号"
align="center" />
<el-table-column prop="driveId"
label="驾驶证号"
align="center" />
<el-table-column prop="tel"
label="联系方式"
align="center" />
<el-table-column prop="signType"
label="签约状态"
align="center">
<template slot-scope="scope">
<span :class="scope.row.signType === 0?'signTypeColor':''">{{scope.row.signType === 0?'未签约':'已签约'}}</span>
</template>
</el-table-column>
<el-table-column label="司机风险数据"
align="center">
<template slot-scope="scope">
<el-button type="text"
v-if="scope.row.signType === 0"
class="signTypeColor">需签约</el-button>
<el-button type="text"
v-else>查看</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination @size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[10, 20, 50, 100]"
:page-size="10"
layout="total, sizes, prev, pager, next, jumper"
:total="tableData.length">
</el-pagination>
</el-main>
</el-container>
</template>
<script lang="ts">
import Vue from "vue";
import files from "../jsonFile";
export default Vue.extend({
data() {
return {
filesList: files,
selectIndex: 0,
defaultActive: "1",
currentPage4: 4,
tableData: [
{
name: "张三",
cardId: "110430198801180456",
driveId: "110430198801180456",
tel: "13811111111",
signType: 0
}
]
};
},
mounted() {
this.defined();
},
methods: {
defined() {
for (let i = 0; i < 9; i++) {
let object = {
name: "张三",
cardId: "110430198801180456",
driveId: "110430198801180456",
tel: "13811111111",
signType: i === 0 ? 0 : 1
};
this.tableData.push(object);
}
},
handleSizeChange(val: Number) {
console.log(`每页 ${val} 条`);
},
handleCurrentChange(val: Number) {
console.log(`当前页: ${val}`);
}
}
});
</script>
<style lang="scss">
.menuSecond {
background: #f7f7f7;
margin: 0 10px;
.menuSecondRight {
background: #fff;
margin-left: 10px;
.menuSecondH3 {
margin-bottom: 40px;
}
}
.el-pagination {
margin-top: 30px;
float: right;
}
.signTypeColor {
color: #d40707;
}
}
.el-menu {
background: #fff;
}
</style>路由的配置 router.ts
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home,
children: [
{
path: '/',
name: 'homeView',
component: () =>
import(/* webpackChunkName: "about" */ './views/homeView.vue')
},
{
path: 'menuSecond',
name: 'menuSecond',
children: [
{
path: ':num',
name: 'menuThird',
component: () =>
import(/* webpackChunkName: "about" */ './views/menuThird.vue')
}
],
component: () =>
import(/* webpackChunkName: "about" */ './views/menuSecond.vue')
}
]
}
]
})
第二种方法
1.新建 view/layout.vue
<template>
<el-container>
<!--顶部栏-><Head></Head>
<el-container>
<!-- 左侧栏 --><Left></Left>
<!--如右侧变，其他不变--> <router-view />
</el-container>
</el-container>
</template>
<script>
import Head from '@/components/Head'
import Left from '@/components/Left'
export default {
components: {
Head,
Left
}
}
</script>
2.新建components/Head.vue
<template>
<el-header class="headerAll">
<div class="headImage"></div>
<!-- <img src=""
class="headImage"> -->
<!-- 左侧栏 -->
<el-menu :default-active="activeIndex"
class="el-menu-demo"
mode="horizontal"
background-color="#222a30"
text-color="#fff"
active-text-color="#29e2fe"
@select="handleSelect">
<el-menu-item v-for="(item, index) in menuList"
:key="index"
:index="item.index"
v-on:listenToChildEvent="menuClick">{{item.name}}</el-menu-item>
</el-menu>
<el-dropdown>
<img src="../assets/headImage.jpg"
class="drophead" />
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>个人信息</el-dropdown-item>
<el-dropdown-item>退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-header>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
components: {}
})
export default class Home extends Vue {
data() {
return {
activeIndex: "1",
menuList: [
{
name: "首页",
index: "1",
link: ""
},
{
name: "车队基本信息",
index: "2",
link: ""
},
{
name: "车队业务/交易管理",
index: "3",
link: ""
},
{
name: "车队风险信息",
index: "4",
link: ""
},
{
name: "车辆保险信息",
index: "5",
link: ""
},
{
name: "车队估值/风险",
index: "6",
link: ""
},
{
name: "车队财资",
index: "7",
link: ""
},
{
name: "车队信贷",
index: "8",
link: ""
}
]
};
}
private handleSelect(key: any, keyPath: any) {
switch (key) {
case "1":
this.$router.push({ path: "/" });
break;
case "4":
this.$router.push({ path: "/menuThird" });
break;
default:
break;
}
}
menuClick(data: any) {
this.$router.push(data);
}
}
</script>
<style lang="scss">
.headerAll {
background: #222a30;
margin-bottom: 20px;
.headImage {
width: 150px;
height: 100%;
border: 0;
}
.drophead {
width: 40px;
height: 40px;
border-radius: 50%;
}
}
</style>3.新建 components/Left.vue
<template>
<!-- 左侧栏 -->
<el-aside width="200px"
class="asideClass">
<el-menu :default-active="defaultActive"
class="el-menu-vertical-demo"
active-text-color="#303133"
@select="handleSelect">
<el-menu-item v-for="(item, index) in filesList.navigeList"
:key="index"
:index="item.index">
<span slot="title">{{item.name}}</span>
</el-menu-item>
</el-menu>
</el-aside>
</template>
<script lang="ts">
import Vue from "vue";
import files from "../jsonFile";
export default Vue.extend({
data() {
return {
filesList: files,
selectIndex: 0,
defaultActive: "1",
currentPage4: 4
};
},
methods: {
handleSelect(key: String) {
this.selectIndex = Number(key) - 1;
}
}
});
</script>
<style lang="scss">
.menuSecond {
background: #f7f7f7;
margin: 0 10px;
.menuSecondRight {
background: #fff;
margin-left: 10px;
.menuSecondH3 {
margin-bottom: 40px;
}
}
.el-pagination {
margin-top: 30px;
float: right;
}
.signTypeColor {
color: #d40707;
}
}
.el-menu {
background: #fff;
}
</style>4.路由配置
import Vue from 'vue'
import Router from 'vue-router'
// import Home from './views/Home.vue'
import layout from './views/layout.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: layout,
children: [
{
path: '/',
name: 'homeView',
component: () =>
import(/* webpackChunkName: "about" */ './views/homeView.vue')
},
{
path: 'menuSecond',
name: 'menuSecond',
component: () =>
import(/* webpackChunkName: "about" */ './views/menuSecond.vue')
},
{
path: 'menuThird',
name: 'menuThird',
component: () =>
import(/* webpackChunkName: "about" */ './views/menuThird.vue')
}
]
}
]
})
来源：oschina
链接：https://my.oschina.net/u/4314849/blog/3447246