Vue Router 和 Vuex 剖析

Vue Router 和 Vuex 剖析

以下是关于 Vue Router 和 Vuex 的全面解析，通过对比学习法和实用场景示例帮助理解记忆：

---

一、Vue Router（路由管家）

1. 核心职责

• 路由映射：URL路径 ↔ 组件视图
• 导航控制：页面跳转与守卫
• 状态管理：通过$route共享路由信息

2. 核心概念

// 路由配置示例
const routes = [
  {
   
    
    path: '/user/:id',
    component: User,
    props: true, // 启用props接收路由参数
    children: [
      {
   
    path: 'profile', component: Profile } // 嵌套路由
    ],
    beforeEnter: (to, from) => {
   
    /* 路由独享守卫 */ }
  }
]

// 路由模式选择
const router = createRouter({
   
   
  history: createWebHashHistory(), // 或 createWebHistory()
  routes
})

3. 功能对比

功能	Vue2写法	Vue3写法
路由创建	new VueRouter()	createRouter()
路由模式	mode: 'hash'	createWebHashHistory()
导航守卫	组件内beforeRouteEnter	组合式API onBeforeRouteUpdate

4. 导航守卫流程