2、router - list 导航栏

一、公众区域实现list

用来：设置公共的 list 模块，这是主页面，所有页面都会显示 Head、Foot栏。

代码 ： app.vue 【 即会显示相应的组件 】

image.png

二、组件内：router-link 实现

1、实现原理

1、设置公共组件 head,用 实现路由跳转到 cat、dog
2、在 cat、dog 中引用 head，
3、不足：相同的内容 （Head、Foot ）需重复渲染

2、代码

Head：

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 : 点击跳转的子路由
router-view：子路由的显示位置

三种方式，按实际情况决定使用哪个。