VueX和Vue-router路由结合使用

最新推荐文章于 2023-05-23 10:21:56 发布

Maji-May

最新推荐文章于 2023-05-23 10:21:56 发布

阅读量1.9k

点赞数 1

分类专栏：前端开发文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/YuriChao/article/details/122442330

版权

本文介绍如何在Vue应用中结合VueX和Vue-router，利用Vuex存储和管理路由地址。在VuEX中定义state、mutations和actions，当用户权限允许时，将路由地址存入VuEX。通过vue-tools调试工具验证VuEX已存储当前页面路由。同时，展示了在组件中监听VuEX中路由变量变化的方法。

摘要由CSDN通过智能技术生成

VueX和Vue-router路由结合使用

版本环境：“vuex”: “^3.4.0”, “vue”: “^2.6.11”,“vue-router”: “^3.2.0”,

例如现在我想在我每次修改路由地址的时候将这个地址存入vuex,进行动态管理，观察改动等等

参考了 https://forum.quasar-framework.org/topic/4160/solved-access-vuex-store-in-router-js

首先在 vuex中写入需要的 state、mutations、actions等子模块

import Vuex from 'vuex';
Vue.use(Vuex)
export default new Vuex.Store({
   
  state:{
   
    curRoutePath: '', //当前路由地址
  },
  mutations:{
   
     	CHANGE_CUR_ROUTE_PATH(state, payload) {
    //同步存储
			state.curRoutePath = payload
		},