VueX和Vue-router路由结合使用

本文介绍如何在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
		}, 
  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值