一、公众区域实现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>

Cat：

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>