vue router 4 使用 createrouter 创建路由实例，分三步：选历史模式（createwebhistory、createwebhashhistory 或 creatememoryhistory）、定义 routes 数组（含 path、component 等字段）、调用 createrouter 传入 history 和 routes 并导出；最后在 main.ts 中通过 app.use(router) 挂载。
使用 createRouter 创建路由实例是 Vue Router 4（适配 Vue 3）的标准方式，核心就三步：选历史模式、定义路由表、调用函数创建并导出。
选择合适的历史模式
Vue Router 提供三种内置历史模式，根据部署环境和 URL 风格选一个：
-
createWebHistory()：生成干净 URL（如
/about），需服务器支持 HTML5 History API，适合常规部署； -
createWebHashHistory()：URL 带
#（如/#about），不依赖服务器配置，兼容性好； - createMemoryHistory()：纯内存管理，无浏览器地址栏变化，常用于测试或无痕/服务端渲染等特殊场景。
定义路由表 routes
这是一个数组，每个对象描述一条路由规则，至少包含 path 和 component：
-
path是匹配的路径字符串，支持动态参数（如/user/:id）和通配符； -
component是导入的组件模块（推荐使用异步 import() 实现懒加载）； - 可选添加
name（命名路由，便于编程式导航）、meta（自定义元信息，如权限标识）、redirect（重定向）等字段。
示例：
const routes = [
{ path: '/', component: () => import('@/pages/Home.vue') },
{ path: '/about', name: 'About', component: () => import('@/pages/About.vue') },
{ path: '/user/:id', component: () => import('@/pages/User.vue'), meta: { requiresAuth: true } }
]
调用 createRouter 创建并导出实例
把历史模式和路由表传入 createRouter，得到路由器实例，并默认导出：
import { createRouter, createWebHistory } from 'vue-router'
import { routes } from './routes'
const router = createRouter({
history: createWebHistory(), // 或 createWebHashHistory()
routes
})
export default router
注意：该文件通常放在 src/router/index.ts（或 .js），后续在 main.ts 中通过 app.use(router) 挂载到应用实例上。
挂载到 Vue 应用
在项目入口（如 main.ts）中引入并使用：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router) // 关键：注册路由插件
app.mount('#app')
完成这一步后，<router-view></router-view> 才能渲染匹配的组件，<router-link></router-link> 和 Composition API 中的 useRouter/useRoute 也才可用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
