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

最新推荐文章于 2026-08-18 15:59:11 发布

原创最新推荐文章于 2026-08-18 15:59:11 发布 · 160 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

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.isLoggedIn
  if (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: {
    // 异步场景（如接口请求）放在 action
    async 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']) }
}