一、公众区域实现list
用来：设置公共的 list 模块，这是主页面，所有页面都会显示 Head、Foot栏。
代码 ： app.vue 【 <router-view> 即会显示相应的组件 】
image.png
二、组件内：router-link 实现
1、实现原理
1、设置公共组件 head,用 <router-link> 实现路由跳转到 cat、dog
2、在 cat、dog 中引用 head，
3、不足：相同的内容 （Head、Foot ）需重复渲染
2、代码
Head：
<template>
<div id="head">
<router-link tag="span" :to="{path:'cat',query:{plan:'hh'}}">猫</router-link>
<router-link tag="span" :to="{path:'dog'}">狗</router-link>
</div>
</template>
image.png
三、组件内：router-view 实现
当前组件为 父组件，点击list 导航按钮，在父组件内局部改变子路由。
方便：相同的内容，不必重复渲染。
1、 router/ index.js : 设置子路由
import Control from '@/page/control/control'
import A from '@/page/control/a'
import B from '@/page/control/b'
{
path: '/control',
name: 'Control',
component: Control,
children:[
{
path : 'a',
name: 'A',
component: A,
},
{
path : 'b',
name: 'B',
component: B,
}
]
},
2、父组件（Control）中
<router-link tag="div" to="a">
<div :class="'aa sel'">控制</div>
</router-link>
<router-link tag="div" to="b">
<div :class="'aa'">口令</div>
</router-link>
<router-view></router-view>
router-link : 点击跳转的子路由
router-view：子路由的显示位置
