// 引入必要的router组件
import {createRouter, createWebHistory} from 'vue-router'
// 引入视图
const Home = () => import('../views/Home/Home.vue')
const UserIndex = () => import('../views/User/UserIndex.vue')

// 引入组件
const change_user = () => import('../components/User/ChangeUser.vue')
const user_info = () => import('../components/User/UserInfo.vue')

// 创建路由，如果同一个路由中包含多个组件，则将component改名为components（加s），已对像的形式加添加多个组件，对象中的key是对象的名称， 可以在视图中使用此名称指定组件
const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/user',
        name: 'user',
        component: UserIndex,
        // redirect 设置默认显示的页面
        redirect: '/user/info',
        // 定义嵌套路由, 子路径不要加'/'，加了'/' 请求路径是/info，不加的请求是/user/info
        children: [
            {
                path: 'info',
                name: 'info',
                component: user_info,
            },
            {
                path: 'change',
                name: 'change',
                component: change_user,
            }
        ]
    }
]

// 创建路由器，使用createRouter方法，传入history（路由类型）和 创建好的路由routes
// 路由类型分为hash型和html5型，分别为createWebHashHistory和createWebHistory
const router = createRouter({
    history: createWebHistory(),
    routes
})

// 导出路由
export default router