路由标签之router-view理解
Vue 路由中的 <router-view/> 是用来承载当前级别下的子级路由的一个视图标签,此标签的作用就是显示当前路由级别下一级的页面。例如:#路由引入 desk.vue 此页面为基础页面,所有页面引入,负责系统的整体布局。#desk页面分割完成后,将<router-view/>标签写入到实际渲染区域。#视系统布局而定,左右布局在右侧,上中下布局在中间。sys-rout
Vue 路由中的 <router-view/> 是用来承载当前级别下的子级路由的一个视图标签,此标签的作用就是显示当前路由级别下一级的页面。
例如:
#路由引入 desk.vue 此页面为基础页面,所有页面引入,负责系统的整体布局。
#desk页面分割完成后,将<router-view/>标签写入到实际渲染区域。
#视系统布局而定,左右布局在右侧,上中下布局在中间。
sys-router.js
import desk from '@/view/desk.vue'
export default [
{
path: '/login',
name: 'login',
component: () => import('@/view/login.vue')
},
{
path: '/',
name: 'home',
redirect: '/index',
component: desk,
children: [
{
path: '/index',
name: 'index',
component: () => import('@/view/index.vue')
}
]
}
]
desk.vue 页面渲染部分
<Content class="main-content-con">
<Layout class="main-layout-con">
<Content class="content-wrapper">
<keep-alive>
<router-view/>
</keep-alive>
</Content>
</Layout>
</Content>
上面路由的 path="/index" 路径页面,直接被desk.vue 的 <router-view /> 所显示。
需要注意的是这个 <router-view /> 标签只能显示根目录下的下一级标签,如果子路由里又存在 children 路由块需要继续增加<router-view />标签,写法如下:
next-router.js
import desk from '@/view/desk.vue';
export default {
path: '/router',
name: 'router',
component: desk,
children: [
{
path: 'test-main',
name: 'test-main',
component: () => import('@/view/router/test/main.vue'),
redirect: { name: 'test-index' },
children: [
{
path: '',
name: 'test-index',
component: () => import('@/view/router/test/index.vue')
},
{
path:'test-add',
name:'test-add',
component: ()=> import('@/view/router/test/add.vue')
}
]
]
}
由路由关系图可以看出来这个此路由需要两个 <router-view /> 承载 ,上面的写法是二级路由为 <router-view /> ,来显示三级路由,三级路由的页面铺满了二级路由的页面。
由页面源码可见
1、二级 <router-view class="sssssssssssssssssssssssss"/>
2、三级<router-view class="fffffffffffffffffffffff"/>
<div class="fffffffffffffffffffffff sssssssssssssssssssssssss"></div>
由此可得三级路由的显示必须在<router-view />的承载下,上面路由的转发写法是为了将三级路由的页面显示到二级路由。
记录一下学习过程。
更多推荐
所有评论(0)