路由标签之router-view理解

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 />的承载下，上面路由的转发写法是为了将三级路由的页面显示到二级路由。

记录一下学习过程。