子路由的使用

1.app.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

2.router.js

import Vue from 'vue';
import Router from 'vue-router';
import Login from './views//Login';
import Home from './views/Home';

Vue.use(Router);

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login,
    },
    {
      path:'/home',
      name:'home',
      component:Home,
      children:[
        {
          path: 'list',
          name:'list',
          //路由缓存
          component: () => import(/* webpackChunkName: "list" */ './views/List.vue'),
        },
        {
          path: 'user',
          name:'user',
          //路由缓存
          component: () => import(/* webpackChunkName: "user" */ './views/User.vue'),
        }
      ]
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
    },
  ],
});

3.home.vue

<template>
  <div>
    <router-view></router-view>
    <ul>
      <li>
        <router-link :to="{name: 'list'}">新闻列表</router-link>
      </li>
      <li>
        <router-link :to="{name: 'user'}">个人中心</router-link>
      </li>
    </ul>
  </div>
</template>