路由模式

@History

路由配置项

Vue2使用 mode 配置项，Vue3使用 history 配置项

需要引入对应的包再使用

createWebHistory

HTML5 模式，URL 不带 #；传统网站模式

需要服务器端配合处理路径，否则容易出现404；后端运维基本技能

http://localhost:5173/

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    // 
})

createWebHashHistory

hash 模式；推荐模式

URL 带 #，看起来不够美观

SEO 优化性能略微不足

兼容性更好，不需要服务器端配合处理路径；前后端开发比较省心

http://localhost:5173/#/

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
    history: createWebHashHistory(import.meta.env.BASE_URL),
    // 
})

[] 分别使用传统模式和哈希模式，访问错误的路由地址，在开发者工具中查看控制台输出信息

[] 优秀作品提交，请使用哈希模式，指定 vite.config.js 中，追加 base 为相对路径再发布

base: './'