Vue2 学习笔记系列从 Vue Router 路由到 Vuex 状态管理Vue2 项目里绕不开的两块**路由Vue Router**管页面跳转**状态管理Vuex**管跨组件数据共享。本文把最常用、最容易混的知识点串一遍配可复制的代码。一、Vue Router 路由1.1 基本配置importVuefromvueimportVueRouterfromvue-routerimportHomefrom/views/Home.vueimportAboutfrom/views/About.vueVue.use(VueRouter)constroutes[{path:/,name:Home,component:Home},{path:/about,name:About,component:About}]constrouternewVueRouter({mode:history,// 去掉 URL 里的 #routes})exportdefaultrouter1.2 嵌套路由constroutes[{path:/user,component:UserLayout,children:[{path:,component:UserProfile},// /user{path:posts,component:UserPosts}// /user/posts]}]1.3 路由守卫权限控制核心router.beforeEach((to,from,next){constloggedInstore.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 一个完整 storeimportVuefromvueimportVuexfromvuexVue.use(Vuex)exportdefaultnewVuex.Store({state:{count:0,user:null},getters:{doubleCount:statestate.count*2,isLoggedIn:state!!state.user},mutations:{INCREMENT(state,n1){state.countn},SET_USER(state,user){state.useruser}},actions:{// 异步场景如接口请求放在 actionasynclogin({commit},payload){constuserawaitapi.login(payload)commit(SET_USER,user)}}})2.3 组件里怎么用// 读状态this.$store.state.countthis.$store.getters.doubleCount// 派发 action异步this.$store.dispatch(login,{username,password})// 提交 mutation同步this.$store.commit(INCREMENT,2)配合mapState/mapGetters/mapActions语法糖组件代码更简洁import{mapState,mapActions}fromvuexexportdefault{computed:{...mapState([count]),...mapGetters([doubleCount])},methods:{...mapActions([login])}}三、路由 Vuex 配合的典型场景登录流程就是两者协作的经典案例路由守卫拦截需鉴权页面 → 未登录跳/login登录页提交 →dispatch(login)调接口action拿到用户信息 →commit(SET_USER)写入 state守卫再次判断getters.isLoggedIn为 true → 放行。四、小结Vue Router负责「去哪」核心是路由表配置、嵌套路由和beforeEach守卫Vuex负责「共享什么」严格遵循action(异步) → mutation(同步改) → state的单向数据流两者结合就能撑起一个带权限、带全局状态的真实前端应用。参考资料Vue2 官方文档Vue Router / Vuex个人学习笔记整理
Vue2 学习笔记系列从 Vue Router 路由到 Vuex 状态管理Vue2 项目里绕不开的两块**路由Vue Router**管页面跳转**状态管理Vuex**管跨组件数据共享。本文把最常用、最容易混的知识点串一遍配可复制的代码。一、Vue Router 路由1.1 基本配置importVuefromvueimportVueRouterfromvue-routerimportHomefrom/views/Home.vueimportAboutfrom/views/About.vueVue.use(VueRouter)constroutes[{path:/,name:Home,component:Home},{path:/about,name:About,component:About}]constrouternewVueRouter({mode:history,// 去掉 URL 里的 #routes})exportdefaultrouter1.2 嵌套路由constroutes[{path:/user,component:UserLayout,children:[{path:,component:UserProfile},// /user{path:posts,component:UserPosts}// /user/posts]}]1.3 路由守卫权限控制核心router.beforeEach((to,from,next){constloggedInstore.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 一个完整 storeimportVuefromvueimportVuexfromvuexVue.use(Vuex)exportdefaultnewVuex.Store({state:{count:0,user:null},getters:{doubleCount:statestate.count*2,isLoggedIn:state!!state.user},mutations:{INCREMENT(state,n1){state.countn},SET_USER(state,user){state.useruser}},actions:{// 异步场景如接口请求放在 actionasynclogin({commit},payload){constuserawaitapi.login(payload)commit(SET_USER,user)}}})2.3 组件里怎么用// 读状态this.$store.state.countthis.$store.getters.doubleCount// 派发 action异步this.$store.dispatch(login,{username,password})// 提交 mutation同步this.$store.commit(INCREMENT,2)配合mapState/mapGetters/mapActions语法糖组件代码更简洁import{mapState,mapActions}fromvuexexportdefault{computed:{...mapState([count]),...mapGetters([doubleCount])},methods:{...mapActions([login])}}三、路由 Vuex 配合的典型场景登录流程就是两者协作的经典案例路由守卫拦截需鉴权页面 → 未登录跳/login登录页提交 →dispatch(login)调接口action拿到用户信息 →commit(SET_USER)写入 state守卫再次判断getters.isLoggedIn为 true → 放行。四、小结Vue Router负责「去哪」核心是路由表配置、嵌套路由和beforeEach守卫Vuex负责「共享什么」严格遵循action(异步) → mutation(同步改) → state的单向数据流两者结合就能撑起一个带权限、带全局状态的真实前端应用。参考资料Vue2 官方文档Vue Router / Vuex个人学习笔记整理
