vue3动态路由刷新后空白或者404

原创

已于 2023-08-21 13:57:44 修改 · 1.5w 阅读

46 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #typescript #前端 #前端框架

于 2022-06-16 19:21:59 首次发布

本文档记录了使用Vue、Vue Router和Vuex实现动态路由，并处理页面刷新后路由失效的问题。作者详细阐述了如何在刷新时保存和恢复路由状态，以及在beforeEach路由守卫中动态添加路由的技巧，同时分享了在排错过程中的心得。

前言

之前用vue+ant-design-vue写了一个动态路由的页面，更新看一下不能用了555~~~
之前用的组件版本不知道了，回退也不知道哪个版本合适，就是用"vue": "^3.2.13" , "vue-router": "^4.0.3","vuex": "^4.0.0"，ant-design-vue": "^3.2.5"重新写一个吧。
本文章是看了其它杂七杂八的博客，自己排错后编写下，不容易啊

实现

首先在store\index.js文件编写

import {
   
    createStore } from 'vuex'


export default createStore({
   
   
  state: {
   
   
    menu_lists: []  //菜单
  },
  getters: {
   
   
    account(state) {
   
   
      return state.menu_lists  // 读取菜单列表
    }
  },
  mutations: {
   
   
    // 增加菜单
    menuAdd(state, n) {
   
   
      if (state.menu_lists.length == 0) {
   
   
        state.menu_lists.push(n)
      } else {
   
   
        if (state.menu_lists.some(menu => menu.id!= n.id)) {
   
   
          state.menu_lists.push(n)
        }
      }
    },
    // 清空菜单
    menuDelect(state) {
   
   
      state.menu_lists.length = 0
    }
  },
  actions: {
   
   
    menu_add({
    
     commit }, data) {
   
   
      commit('menuAdd', data)
    },
	// 登出时调用将菜单数据删除
    menu_delect({
    
     commit }) {
   
   
      commit('menuDelect')
    }
  },
  modules: {
   
   
  }
})

最低0.47元/天解锁文章