In a page if you want to achieve mosaic composed of three pages of a page, this time on a route used nesting.
the first method:
1. The top of the page /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 the extends Vue {
index: "5",
data() {
return {
activeIndex: ". 1",
MenuList: [
{
name: "Home",
index: ". 1",
Link: ""
},
{
name: "Team basic information",
index: "2",
Link: ""
},
{
name: "fleet operations / transaction management",
index: "3",
Link: ""
},
{
name: "team risk information",
index: "4",
Link: ""
},
{
name: "vehicle Insurance information "
Link: ""
},
{
name: "team valuation / risk",
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. On the left column page 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-the MENU>
</ Template>
</ EL-Container>
<-! Jump right column menuThird ->
</ EL-aside>
<Router-View />
<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. The right-hand column page 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 ' unsigned': 'Contracted'}} </ span>
</ template>
<Table-EL-column label =" Data driver risk "
</ EL-Table-column>
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>
Routing configuration 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')
}
]
}
]
})
The second method
1. Create a new view / layout.vue
<Template> <EL-Container> <-! top bar ->
<Head></Head>
<el-container>
<!-- 左侧栏 -->
<Left> </ Left>
<-! Becomes such right, the other unchanged ->
<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. Create 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: "Team Treasury"
{
name: "Team Basic information",
index: "2",
Link: ""
},
{
name: "Fleet Operations / Transaction Management",
index: "3",
Link: ""
},
{
name: "Team Risk Information ",
index:". 4 ",
Link:" "
},
{
name:" vehicle insurance information ",
index:". 5 ",
Link:" "
},
{
name:" team valuation / risk ",
index:". 6 ",
Link:" "
},
{
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. New 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. Routing Configuration
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')
}
]
}
]
})