vue 嵌套路由
Posted gqx-html
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 嵌套路由相关的知识，希望对你有一定的参考价值。
在一个页面中如果想实现三个页面的拼接组成一个页面，这时候就用到嵌套路由了。
第一种方法：
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‘)
]
]
)
以上是关于vue 嵌套路由的主要内容，如果未能解决你的问题，请参考以下文章