资讯详情

Vue2 学习笔记系列：从 Vue Router 路由到 Vuex 状态管理

Vue2 项目里绕不开的两块：路由（Vue Router）管页面跳转，状态管理（Vuex）管跨组件数据共享。本文把最常用、最容易混的知识点串一遍，配可复制的代码。

一、Vue Router 路由

1.1 基本配置

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'Vue.use(VueRouter)const routes = [{ path: '/', name: 'Home', component: Home },{ path: '/about', name: 'About', component: About }
]const router = new VueRouter({mode: 'history',   // 去掉 URL 里的 #routes
})export default router

1.2 嵌套路由

const routes = [{path: '/user',component: UserLayout,children: [{ path: '', component: UserProfile },      // /user{ path: 'posts', component: UserPosts }    // /user/posts]}
]

1.3 路由守卫（权限控制核心）

router.beforeEach((to, from, next) => {const loggedIn = store.getters.isLoggedInif (to.meta.requiresAuth && !loggedIn) {next('/login')            // 未登录跳登录页} else {next()                    // 放行}
})

二、Vuex 状态管理

当多个组件需要共享同一份数据（如用户信息、购物车），props/emit 层层传递会很痛苦，这时上 Vuex。

2.1 四大核心概念

概念	作用	是否可直接改
state	唯一数据源（类似 data）	否
getters	派生状态（类似 computed）	否
mutations	同步修改 state 的唯一途径	是（必须）
actions	处理异步，再提交 mutation	是

2.2 一个完整 store

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {count: 0,user: null},getters: {doubleCount: state => state.count * 2,isLoggedIn: state => !!state.user},mutations: {INCREMENT(state, n = 1) {state.count += n},SET_USER(state, user) {state.user = user}},actions: {// 异步场景（如接口请求）放在 actionasync login({ commit }, payload) {const user = await api.login(payload)commit('SET_USER', user)}}
})

2.3 组件里怎么用

// 读状态
this.$store.state.count
this.$store.getters.doubleCount// 派发 action（异步）
this.$store.dispatch('login', { username, password })// 提交 mutation（同步）
this.$store.commit('INCREMENT', 2)

配合 mapState / mapGetters / mapActions 语法糖，组件代码更简洁：

import { mapState, mapActions } from 'vuex'
export default {computed: { ...mapState(['count']), ...mapGetters(['doubleCount']) },methods: { ...mapActions(['login']) }
}

三、路由 + Vuex 配合的典型场景

登录流程就是两者协作的经典案例：

1. 路由守卫拦截需鉴权页面 → 未登录跳 /login；
2. 登录页提交 → dispatch('login') 调接口；
3. action 拿到用户信息 → commit('SET_USER') 写入 state；
4. 守卫再次判断 getters.isLoggedIn 为 true → 放行。

四、小结

• Vue Router 负责「去哪」，核心是路由表配置、嵌套路由和 beforeEach 守卫；
• Vuex 负责「共享什么」，严格遵循 action(异步) → mutation(同步改) → state 的单向数据流；
• 两者结合，就能撑起一个带权限、带全局状态的真实前端应用。

---

参考资料

• Vue2 官方文档（Vue Router / Vuex）
• 个人学习笔记整理