vue 解决addRoutes动态添加路由后刷新失效问题(跳转“404”页面)

た入场券 2022-04-03 08:45 3229阅读 0赞

这篇文章主要介绍了vue 解决addRoutes动态添加路由后刷新失效问题，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

# **前言** #

某些场景下我们需要利用addRoutes动态添加路由，但是刷新后就会失效，前段时间项目里刚好遇到了这个应用场景，所以就花时间研究了一下，做下分享跟记录，说的不对的地方，请大家指正。

应用场景：用户a登录进系统，用户挑选店铺后跳转到店铺详情首页，进入到动态添加的路由页面后，如果这个刷新页面或者更改地址栏，你会发现用户会跳到404页面。（因为我在路由配置全局匹配404路由如下）

{path: '*',redirect: '/404',hidden: true},
    {path: '/404',name: "404",component: () => import('@/views/errorPage/404'),hidden: true},
    {path: '/401',name: "401",component: () => import('@/views/errorPage/401'),	hidden: true},

根据路由配置，如果路由没有找到强匹配的地址，就会选择重定向“/404”

## 问题展示 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxODAzNTAz_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxODAzNTAz_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxODAzNTAz_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxODAzNTAz_size_16_color_FFFFFF_t_70 3][]

# **思路** #

1.用户点击按钮，用addRutes动态添加路由并跳转，并把路由保存;  
2.用户在新跳转的页面，刷新时暂存刷新的页面，利用beforeEach进行拦截判断，如果发现之前有保存路由路径，并且判断新页面只是刷新事件，再将之前保存的路由添加进来;

# 实现 #

在App.vue中添加一些js代码保存刷新时的路径

//vue的调用钩子函数
    created () {
      this.routeUpdate(this.$route);
    },
    //监听路由更变
    watch: {
      '$route': 'routeUpdate'
    },
    methods: {
        routeUpdate (to) {
          if (to.name) {
            this.menuShow = to.meta.menu === undefined || to.meta.menu
            this.localLoginUser()
          }
          this.loadShopInfo()
          this.loadRoutesInfo()
        },
        loadRoutesInfo: _.once(function () {
          //在页面加载时读取sessionStorage里的状态信息
          try {
            sessionStorage.getItem("routesInfo") && this.$store.commit("setRouterArray", JSON.parse(sessionStorage.getItem("routesInfo")));
            // sessionStorage.setItem("routesInfo", "")
          } catch (e) {
            console.log(e)
          }
          //在页面刷新时将vuex里的信息保存到sessionStorage里
          window.addEventListener("beforeunload", () => {
            //sessionStorage.setItem("pathName", window.location.pathname)//重点：暂存页面刷新的地址
            sessionStorage.setItem("pathName", "")
            sessionStorage.setItem("routesInfo", JSON.stringify(this.$store.getters.getRouterArray))
          })
        }),
    }

浏览器可以查看到

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxODAzNTAz_size_16_color_FFFFFF_t_70 4][]

在beforeEach的方法中拦截

/**
     * @param {Object} to 即将要进入的目标 路由对象
     * @param {Object} from 当前导航正要离开的路由
     * @param {Function} next 一定要调用该方法来 resolve 这个钩子。
     */
    router.beforeEach((to, from, next) => {
        if (from.name == null) { //页面刷新
    		let routerTable = JSON.parse(sessionStorage.getItem("routesInfo"))
          //组合成完整路由对象
    		routerUtil.combination(routerTable)
          //递归组合成嵌套路由树
    		routerTable = routerUtil.routerTree(routerTable, 0)
          //动态添加路由
    		share.addRoutes(routerTable)
    		store.commit('setRouterTable', routerTable)
    		let pathName = sessionStorage.getItem("pathName") //暂存上一个路由
    		if (pathName == to.path) {
    			next()
    		} else {
    			sessionStorage.setItem("pathName", to.path)
    			next({...to})
    		}
    	} else {
    		next()
    	}
    })

整体的思路大概就是这样，主要就是利用了beforeEach拦截+sessionStorage的数据存储，就能完成，addRoutes动态添加路由刷新不失效功能。

\------------------------------------------------------------------------------------------------------------------------------------------------------

补充routerUtil 文件

import store from '../store'
    import componentsMap from './components.js'
    
    let routerUtil = {
    	/**
    	 * 后台返回的路由表，需要组合
    	 * @param {Array} routerTable 路由表
    	 */
    	combination(routerTable) {
    		if (routerTable) {
    			routerTable.forEach((item, index) => {
    				item.meta = {
    					icon: item.icon,
    					title: item.title,
    					userAuth: item.userAuth,
    				}
    				item.component = componentsMap[item.component]
    				delete item.icon
    				delete item.title
    				delete item.userAuth
    			})
    		}
    	},
    	/**
    	 * 递归组合成路由树
    	 * @param {Array} notesArray 路由表
    	 * @param {Number} chileId 父节点ID
    	 */
    	routerTree(notesArray, chileId) {
    		let treeNotes = [];
    		if (notesArray && notesArray.length > 0) {
    			notesArray.forEach(note => {
    				let parentId = note.parentId
    				if (chileId == parentId) {
    					let cchileId = note.id
    					let children = routerUtil.routerTree(notesArray, cchileId)
    					if (children && children.length > 0) {
    						note["children"] = children
    					}
    					treeNotes.push(note);
    				}
    			})
    		}
    		return treeNotes;
    	},
    }
    export default routerUtil;

components.js文件

/**
     * 动态路由部件映射
     */
    export default {
    	// login: require('login/index').default, // 同步的方式
    	// login: () => import('login/index') // 异步的方式
    	"Layout": () => import('@/views/layout/Layout'),
    	"home": () => import('@/components/Home'),
    	"DataAnalysis": () => import('~/contentShop/contentHome'),
    	"ContentHome": () => import('~/contentShop/contentHome'),
    	"TagSetting": () => import('~/contentShop/TagAndDetail/tagsetting'),
    	"PcImgText": () => import('~/contentShop/components/AddImgText'),
    	"PcAudio": () => import('~/contentShop/components/AddAudio'),
    	"PcVideo": () => import('~/contentShop/components/AddVideo'),
    	"PcLive": () => import('~/contentShop/components/AddLive'),
    	"PcColumn": () => import('~/contentShop/components/AddColumn'),
    	"PcMember": () => import('~/contentShop/components/AddMember'),
    	"BulidMySelf": () => import('~/BulidMySelf'),
    	"AddImgText": () => import('~/builder/AddImgText'),
    	"AddAudio": () => import('~/builder/AddAudio'),
    	"AddVideo": () => import('~/builder/AddVideo'),
    	"AddLive": () => import('~/builder/AddLive'),
    	"AudioDetails": () => import('~/details/AudioDetails'),
    	"AddLittleCouse": () => import('~/details/AddLittleCouse'),
    	"Column": () => import('~/Column'),
    	"AddColumn": () => import('~/columns/AddColumn'),
    	"ColumnContent": () => import('~/columns/ColumnContent'),
    	"Members": () => import('~/Members'),
    	"AddMember": () => import('~/member/AddMember'),
    	"memberDetail": () => import('~/member/memberDetail'),
    	"OfflineCourse": () => import('~/OfflineCourse'),
    	"AddOfflineCourse": () => import('~/offline/AddOfflineCourse'),
    	"customerHome": () => import('~/customerService/customerHome'),
    	"FinanceManagement": () => import('~/financeManagement/index'),
    	"WithDraw": () => import('~/financeManagement/components/withdrawPeople'),
    	"OrderDetail": () => import('~/financeManagement/components/orderDetail'),
    	"ShopManage": () => import('~/ShopManage'),
    	"change": () => import('~/manage/change'),
    	"StoreMessage": () => import('~/storeSetting/index'),
    	"Menu": () => import('~/storeSetting/Menu'),
    	"Module": () => import('~/storeSetting/module'),
    	"FormalOpen": () => import('~/storeProfile/formalOpen'),
    	"Profile": () => import('~/storeProfile/profile'),
    	"SystemService": () => import('~/SystemService'),
    	"BannerManager": () => import('~/bannerManager/banner'),
    	"SystemOpen": () => import('~/openDistribute/systemOpen'),
    	"WeChatAccDetail": () => import('~/openDistribute/weChatAccDetail'),
    	"OfflineAccDetail": () => import('~/openDistribute/offlineAccDetail'),
    	"SystemDistribute": () => import('~/openDistribute/systemDistribution'),
    }

路由表设计

CREATE TABLE `router_table` (
      `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
      `parent_id` int(11) NOT NULL DEFAULT '0' COMMENT '上级ID',
      `name` varchar(50) NOT NULL DEFAULT '' COMMENT '路由名称',
      `title` varchar(50) NOT NULL DEFAULT '' COMMENT '路由标题',
      `icon` varchar(50) NOT NULL DEFAULT '' COMMENT '路由图标',
      `user_auth` tinyint(1) NOT NULL DEFAULT '0' COMMENT '是否需要登录拦截  0.拦截 1.不拦截',
      `component` varchar(50) NOT NULL DEFAULT '' COMMENT '路由部件',
      `path` varchar(100) NOT NULL DEFAULT '' COMMENT '路由地址',
      `system_type` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1:PC端 2.移动端',
      `hidden` tinyint(1) NOT NULL DEFAULT '0' COMMENT '0.左边侧栏不显示,1.左边侧栏显示',
      `sort_num` tinyint(3) NOT NULL DEFAULT '0' COMMENT '排序',
      PRIMARY KEY (`id`) USING BTREE
    ) ENGINE=InnoDB AUTO_INCREMENT=81 DEFAULT CHARSET=utf8 COMMENT='vue路由表';

喜欢我的朋友可以在微信公众号上关注我：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxODAzNTAz_size_16_color_FFFFFF_t_70 5][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxODAzNTAz_size_16_color_FFFFFF_t_70]: /images/20220403/2b9ed69d02ad469da10561d0287d9ef7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxODAzNTAz_size_16_color_FFFFFF_t_70 1]: /images/20220403/57e600bf7dc642fc8e3f371c14ceaba8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxODAzNTAz_size_16_color_FFFFFF_t_70 2]: /images/20220403/9c30e8e167f14f34a7491e20619e7ea9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxODAzNTAz_size_16_color_FFFFFF_t_70 3]: /images/20220403/0cf162d50551405b856d6841798c88b9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxODAzNTAz_size_16_color_FFFFFF_t_70 4]: /images/20220403/9ca0e5bdfbeb415a9ef0e13447cd4193.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMxODAzNTAz_size_16_color_FFFFFF_t_70 5]: /images/20220403/642b27d1d10a4a43b281981c8f3a2da1.png