Nested display implementation of vue router view
- 2021-11-10 08:28:27
- OfStack
Directory 1. Routing configuration 2. vue page nesting
3. Nested connections
2. vue page nesting
3. Nested connections
3. Nested connections
1. Routing configuration
const routes = [
{
path: '/',
name: ' Navigation 1',
component: Home,
children:[
{
path: '/customer',
name: 'Customer',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/Customer.vue')
},
{
path: '/pageOne',
name: ' Page 1',
component: PageOne,
},
{
path: '/pageTwo',
name: ' Page 2',
component: PageTwo,
},
]
},
{
path: '/navigation',
name: ' Navigation 2',
component: Home,
children:[
{
path: '/pageThree',
name: ' Page 3',
component: PageThree,
},
{
path: '/pageFour',
name: ' Page 4',
component: PageFour
},
]
},
2. vue page nesting
App. vue Configure first router-view
// An highlighted block
<router-view></router-view>
Home. vue Configure 2nd router-view
// An highlighted block
<template>
<div>
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu>
<el-submenu v-for="(item,index) in $router.options.routes" :index="index+''">
<template slot="title"><i class="el-icon-sell"></i>{{item.name}}</template>
<el-menu-item v-for="(item2,index2) in item.children" :index="index+'-'+index2">{{item2.name}}</el-menu-item>
</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> View </el-dropdown-item>
<el-dropdown-item> Add </el-dropdown-item>
<el-dropdown-item> Delete </el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span> Wang Xiaohu </span>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
<script>
export default {
};
</script>
3. Nested connections
First, when you visit http://localhost: 8181/, you will enter the first layer nesting, and then you will enter the first router-view: Home. vue. Then when you access pageone, you continue with Home. vue.
Because the nesting display of router-view is related to the nesting of routing roadbed, it can be seen that in the route, under the path of Navigation 1 are the routing paths of Page 1 and Page 2 respectively. So when you visit page 1pageone, you first visit the parent path Home. vue page. If router-view is not placed on the Home. vue page, the subordinate pages will not be displayed