VUE导航栏和router的综合应用（模块/路由嵌套实例）

需求：

1.头尾和左侧导航栏固定不变
2.点击左侧栏导航改变路由
3.主视区内容随路由变化而变化
实现
需求1与3：
创建三个组件分别为Header.vue/Footer.vue/Left.vue

创建模板文件Template.vue

<template>
    <div class="template">
        <cheader></cheader>//头
        <div>
            <div>
                <div></div>
                <cnavigation></cnavigation>//左侧导航栏
                <router-view></router-view>//主视区插槽
            </div>
        </div>
        <cfooter></cfooter>//足
    </div>
</template>

<script>
import cheader from '../components/common/Header';
import cfooter from '../components/common/Footer';
import cnavigation from '../components/common/Left';
export default {
    name: 'Template',
    components: {
        cheader,
        cfooter,
        cnavigation
    },
    data() {
        return {
        };
    },
    methods: {
    }
};
</script>

创建主视区模块们（此处以PersonalHP.vue为例）
router-index.js
↓ ↓ ↓ ↓ ↓

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);

export default new Router({
  routes: [
    { path: '*', redirect: '/personal' },//意料之外的路由时重定向
    {//路由嵌套
      path: '/personal',
      name: 'personal',
      component: Template,
      children: [//每个子路由对应了一个导航栏的选项，点击选项后跳转到相应路由，相应模块显示在插槽位置。
        {
          name: 'homepage',
          path: '/personal/',
          component: PersonalHP,
          meta: {
            // 页面标题title
            title: '1'
          }
        },
        {
          name: 'zjjl',
          path: '/personal/zjjl',
          component: PersonalHP,
          meta: {
            title: '2'
          }
        },
        {
          name: 'wdxj',
          path: '/personal/wdxj',
          component: PersonalHP,
          meta: {
            title: '3'
          }
        },
        {
          name: 'ysqgk',
          path: '/personal/ysqgk',
          component: PersonalHP,
          meta: {
            title: '4'
          }
        }
      ]
    }
  ]
});

需求2：
left.vue中

 <ul class="list">
            <!-- <li class="wdzy clearfix"><span>我的主页</span></li> -->
            <li v-for="(item,index) in list" :key="index" class="clearfix" :class="[item.class,{'active':item.router===$route.name}]" @click="jump(item.router)">
                <span>{{ item.text }}</span>
            </li>
        </ul>

data() {
        return {
            list: [
                {
                    text: '1',
                    class: 'wdzy',
                    router: 'homepage'
                },
                {
                    text: '2',
                    class: 'zjjl',
                    router: 'zjjl'
                },
                {
                    text: '3',
                    class: 'wdxj',
                    router: 'wdxj'
                },
                {
                    text: '4',
                    class: 'ysqgk',
                    router: 'ysqgk'
                }
            ]
        };
    },