Vue 3后台管理系统需配置Vue Router 4和Pinia：一、安装对应版本依赖；二、在src/router/index.ts创建路由实例并导出；三、在main.ts中依次use router和Pinia；四、组件中通过router-view、router-link及useStore使用。
Vue 3 项目初始化后，配置路由和状态管理是构建后台管理系统最关键的两步。核心在于选对工具、建好结构、正确挂载——不是堆代码，而是搭骨架。
一、安装对应版本的依赖
Vue 3 必须搭配 Vue Router 4 和 Pinia（Vuex 4 已基本被弃用）。不要直接装最新版，要明确指定版本：
-
路由：运行
pnpm add vue-router@4（推荐 pnpm）或npm install vue-router@4 -
状态管理：运行
pnpm add pinia；如需持久化（比如登录态），再加pnpm add pinia-plugin-persistedstate - 安装完成后，检查
package.json中是否出现"vue-router": "^4.x"和"pinia": "^2.x"
二、创建并配置路由实例
在 src 下新建 router/index.ts（推荐 TS）：
- 导入
createRouter和createWebHistory（美观无#，需后端配合）或createWebHashHistory（兼容性好，带#） - 提前在
src/views/下建好页面组件（如Home.vue、Dashboard.vue），再导入到路由文件中 - 定义
routes数组，每个对象包含path、name（命名路由更安全）、component - 调用
createRouter({ history, routes })创建实例，并export default导出
示例关键代码：
立即学习“前端免费学习笔记（深入）”；
Skill Weave Chains — 技能链路由引擎
下载
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
import Home from '@/views/Home.vue'
import Dashboard from '@/views/Dashboard.vue'
const routes = [
{ path: '/', name: 'Home', component: Home },
{ path: '/dashboard', name: 'Dashboard', component: Dashboard }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
三、注册路由与状态管理实例
在 main.ts 中统一挂载：
- 导入刚写的
router和createPinia() - 调用
app.use(router)和app.use(createPinia()) - 确保顺序：先
use路由和 Pinia，再mount
示例：
import { createApp } from 'vue'import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
const app = createApp(App)
app.use(router)
app.use(createPinia())
app.mount('#app')
四、在组件中使用
不需要额外引入，只要确保：
- 模板里有
<router-view></router-view>承载页面内容 - 跳转用
<router-link to="/dashboard">仪表盘</router-link>或编程式导航router.push('/dashboard') - 状态管理：在组件中
import { useXXXStore } from '@/stores/xxx'，然后const store = useXXXStore()即可读写
状态仓库建议放在 src/stores/ 下，按模块拆分（如 user.ts、menu.ts），保持清晰。
