嵌套路由结合共享组件

嵌套路由就是子路由，在router/index.js文件中定义子路由的方式：

const routes = [
    {   // 首页界面
        path: '/',   //根据path进行界面的先后跳转，/表示打开浏览器就打开的界面
        name: 'home',
        component: () => import('@/pages/Home.vue'),
    },
    {
        path: '/vip',
        component: () => import('@/pages/vip.vue'),
        children: [
            {
                path: '',  // 进入的是默认页面
        		component: () => import('@/pages/default.vue'),
            },
            {
                path: 'info',  // 通过在地址栏后加上/info进行访问
        		component: () => import('@/pages/info.vue'),
            },
        ]
    }
]

如果想要显示子页面，我们也需要在父页面中加上<router-view />标签来进行子页面的渲染