Vue：嵌套路由[子级路由]--(个人理解)

描述一下：由于之前一直使用Vue都是配置单页面，导致只需要路由跳转就可以了。而今天做跳转时，一头懵。每次都是切换页面，导致我的导航栏每次都是初始化状态。还傻里傻气的每个子级都引用布局组件。（真他妈蠢，想想都醉了）

在做单页面路由时，只需要配置一个跳转路由方式，name或者path （router-link，this.$router.push()）等方式。

而在非单页里面：其他内容保持一致，只需要内容切换时。嵌套路由少不了使用。但是第一次用，不熟练还是有很多疑问。尝试理解了下。顺便记录一下，养成习惯。

第一步：

      写一个布局页。也就是固定栏目，（导航栏，个人信息栏目啥的），留出一个内容显示区域，里面放上<router-view/>

<template>
  <a-layout id="components-layout-demo-custom-trigger">
  	<!-- PC Menu -->
    <a-layout-sider :trigger="null" collapsible v-model="collapsed" width="256px" class="AdaptiveMenuPC">
      <global-Menu :showTitle="collapsed"></global-Menu>
    </a-layout-sider>
    <!-- iPad Menu -->
    <div  class="AdaptiveMenuPhone">
    	<iPad-Menu ref="Ipad" :visible="visible"></iPad-Menu>
    </div>
    
    <a-layout>
    	<!-- 头部  -->
      <a-layout-header style="background: #fff; padding: 0">
      	<a-row>
      		<a-col :span='21'>
      			<div class="AdaptiveMenuPCIcon">
      				<a-icon  class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'"  @click="()=> collapsed = !collapsed"  />
      			</div>
      			
      			<div class="AdaptiveMenuPhoneIcon">
      					<a-icon  class="trigger" type="menu-unfold"  @click="showDrawer"/>
      			</div>
        	</a-col>
        	
   
        	<!--个人中心 等等-->
        	<a-col >
        		<div class="fonts">123</div>
        	</a-col>
       </a-row>
      </a-layout-header>
      
      <!-- 面包屑 描述  -->
      <!--<GlobalPage-Header>
      	
      </GlobalPage-Header>-->
      	
      <!-- 中间内容 -->   <!--background: '#fff',-->
      <a-layout-content :style="{ margin: '24px 16px', padding: '24px',  minHeight: '280px' }">
        
            <!-- 子级路由区 -->
        	<router-view></router-view> 
       
      </a-layout-content>
      
      <!-- 底部版权 -->
      <a-layout-Footer>
      	<global-Footer></global-Footer>
      </a-layout-Footer>
    </a-layout>
  </a-layout>
</template>
<script>
	import globalMenu from '@/components/pages/GlobalMenu'
	import globalFooter from '@/components/pages/GlobalFooter'
	import iPadMenu from '@/components/pages/iPadMenu'
	import GlobalPageHeader from '@/components/pages/GlobalPageHeader'
export default {
  data(){
    return {
      collapsed: false,
      screenstate:false,
      visible:false
    }
  },
  mounted(){
  	console.log(document.body.clientWidth)
  },
  methods:{
  	/**
  	 * 调用非PC端 Menu导航栏的子级方法，
  	 */
  	showDrawer(){
  		this.$refs.Ipad.showDrawer()
  	}
  },
  components:{
  	globalMenu,
  	globalFooter,
  	iPadMenu,
  	GlobalPageHeader
  }
}
</script>
<style>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color .3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 62px;
  background: #002140;
  display:flex;
}

@media only screen and (max-width:1024px ) {
	.AdaptiveMenuPC{
		display: none;
	}
	.AdaptiveMenuPCIcon{
		display: none;
	}
	.fonts{
		color: red;
	}
}
@media only screen and (min-width: 1025px) {
	.AdaptiveMenuPhone{
		display: none;
	}
	.AdaptiveMenuPhoneIcon{
		display: none
	}
	.ant-drawer{
		display: none
	}
	
	.fonts{
		color: deeppink;
	}
}


</style>

第二：路由

import Vue from 'vue'
import Router from 'vue-router'
import globalLayout from '@/components/pages/GlobalLayout'

Vue.use(Router)

export default new Router({
	routes: [
		{// 父级路由，试着这样理解一下
			path:'/',
			name:'index',
			component:globalLayout,
			meta: { title: '首页' },
			redirect: '/dashboard/ChartDish',
			children: [//子级路由
						{
						  path: '/dashboard/ChartDish',
					      name: 'ChartDish',
					      component: ()=>import('@/views/dashboard/ChartDish'),
					      meta: { title: '图表盘' },
						},
						{
						  path: '/dashboard/Workbench',
					      name: 'Workbench',
					      component: ()=>import('@/views/dashboard/Workbench'),
					      meta:{ title:'工作台' }
						},
						{
						  path: '/403',
					      name: '403',
					      component: ()=>import('@/views/exception/403')
						},
						{
						  path: '/404',
					      name: '404',
					      component: ()=>import('@/views/exception/404')
						},
						{
						  path: '/500',
					      name: '500',
					      component: ()=>import('@/views/exception/500')
						},
		    ]
		},
			    
	]
})

第三步：跳转试试。

<template>
  <div style="position: absolute;">
    <a-layout-sider :trigger="null"  width="256px" >
    <a-drawer
      placement="left"
      :closable="false"
      @close="onClose"
      :visible="ipadVisible"
      width="256px"
    >
    <div  style="width: 256px; height: 64px; background:#002140 ;display: flex;">
		<img src="../../assets/logo.svg" style="width: 30px; margin-left: 25px; margin-top: 0px;" ></img>
		<span style="margin-top: 15px; margin-left: 5px; font-size:20px; color: #ffffff; font-weight: 600;">Ant Design System</span>
	</div>

     <a-menu theme="dark" mode="inline"  :defaultSelectedKeys="['1']" :openKeys="openKeys"  @openChange="onOpenChange">
	        <a-sub-menu key="sub1">
		      <span slot="title"><a-icon type="mail" /><span>控制台1</span></span>
		      <a-menu-item key="1"><router-link :to="{name:'ChartDish'}"></router-link>图表页</a-menu-item>
		      <a-menu-item key="2"><router-link :to="{name:'Workbench'}"></router-link>工作台</a-menu-item>
		      <a-menu-item key="3">测试 3</a-menu-item>
		      <a-menu-item key="4">测试 4</a-menu-item>
	    	</a-sub-menu>
		    <a-sub-menu key="sub2">
		      <span slot="title"><a-icon type="appstore" /><span>控制台2</span></span>
		      <a-menu-item key="5">测试 5</a-menu-item>
		      <a-menu-item key="6">测试 6</a-menu-item>
		      <a-sub-menu key="sub3" title="Submenu">
		        <a-menu-item key="7">测试 7</a-menu-item>
		        <a-menu-item key="8">测试 8</a-menu-item>
		      </a-sub-menu>
		    </a-sub-menu>
		    <a-sub-menu key="sub4">
		      <span slot="title"><a-icon type="setting" /><span>异常页</span></span>
		      <a-menu-item key="9"><router-link :to="{name:'403'}"></router-link>403</a-menu-item>
		      <a-menu-item key="10"><router-link :to="{name:'404'}"></router-link>404</a-menu-item>
		      <a-menu-item key="11"><router-link :to="{name:'500'}"></router-link>500</a-menu-item>
		    </a-sub-menu>
	      </a-menu>
      
    </a-drawer>
    </a-layout-sider>
    <!--<div class="test-f">字体</div>-->
  </div>
</template>
<script>
export default {
  data() {
    return {
      ipadVisible: false, //由于props传递过来的值，不可被改变，否则会抛出异常,所以我们赋值给一个变量
      rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
      openKeys: ['sub1'],
    }
  },
  mounted(){
  	this.ipadVisible=this.visible
  },
  methods: {
    showDrawer() {
      this.ipadVisible = true
    },
    onClose() {
      this.ipadVisible = false
    },
  	/**
  	 * 展开二级Menu目录是关闭其他目录
  	 */
    onOpenChange (openKeys) {
		      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
		      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
		        this.openKeys = openKeys
		      } else {
		        this.openKeys = latestOpenKey ? [latestOpenKey] : []
		      }
		},
  },
  watch: {
    
  },
  props:{
  	visible:{
  		type:Boolean,
  		default:false,
  	},
  }
}
</script>
<style>
	.ant-drawer-wrapper-body{
		background: #001529;
	}
	.ant-drawer-body{
		padding:0px;
	}
	.ant-drawer-header{
		height: 64px;
		background: #002140;
		border: 0px ;
		border-radius: 0px;
	}

	
	
	
</style>

附：

栏目区域始终保持不变，而内容区跟随路由跳转。