1、index.js引入路由组件

import UserRoot from '../views/UserRoot.vue'


const routes = [
    {
        path: "/",
        name: "HomeView",
        // component: HomeView
        component: () => import('../views/HomeView.vue') //懒加载设置,需要这个组件时，才开始调用
    },
    {
        path: "/aboutview",  //父路由地址
        name: "AboutView",
        redirect: "/AboutView/AboutChild",//重定向
        // component: AboutView
        component: () => import('../views/AboutView.vue'),
        children: [   //添加两个子路由
            {
                path: 'AboutChild',
                name: 'AboutChild',
                component: AboutChild
            },
            {
                path: 'AboutChild1',
                name: "AboutChild1",
                component: AboutChild1
            }
        ]
    },
]

2、父路由渲染（例子上的AboutView）

<template>
  <div>
    <!-- <StudentName /> -->
    <router-link to="/AboutView/AboutChild">AboutChild</router-link> | //路径需要写全
    <router-link to="/AboutView/AboutChild1">AboutChild1</router-link>
    <router-view></router-view>
  </div>
</template>