W250511/17.Vue3/project2/src/router/index.js

// 1.引入方法
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import List from '../views/List.vue';
import My from '../views/My.vue';

const routes = [
    {
        path: "/",
        redirect: "/home"
    },
    {
        path: "/home",
        component: Home,
        name:'zhuye'
    },
    {
        path: "/list",
        component: List,
        name:'liebiao',
        redirect:'/list/demo2',
        children:[
            {
                path:'demo1',
                component:()=>import("../views/Demo/Demo1.vue")
            },
            {
                path:'demo2',
                component:()=>import("../views/Demo/Demo2.vue")
            },
        ]
    },
    {
        path: "/my",
        component: My
    },
]

// 2.创建路由对象
const router = createRouter({
    // 定义路由模式
    history: createWebHashHistory(),
    // 路由路径配置
    routes
});

// 3.导出路由对象
export default router;

// history hash区别
// history: 
// 优点
// 需要后端支持，刷新不会丢失路由信息
// Url是更加美观 更接近传统网站的url
// 缺点
// 当后期项目上线 需要服务端配合处理路径问题 否则刷新会有404
// hash:
// 优点
// 兼容性更好 不需要服务端处理
// 缺点
// url带有#号 不美观 在SEO优化方面相对较差