记录 vue-router 跳转到第一个有权限的菜单的实现方式

场景描述

需要实现一个动态路由，并且点击进来加载的页面是第一个有权限的页面。

实现思路

在路由守卫 router.beforeEach 钩子中加入跳转逻辑，从获取的动态路由中匹配第一个加上即可。

router.beforeEach((to, from, next) => {
	 if (getToken()) {
		// 略过请求动态路由的部分
		const accessRoutes = {};
		 router.addRoutes(accessRoutes);
		 next({ path: accessRoutes[0].path + '/' + accessRoutes[0].children[0].path })
	} else {
		window.location.href = "/";
	}
})

扩展

如果要跳转到其他项目的页面，可以通过window.location.href来实现。

也有同学会使用window.open，这里不太推建使用，原因如下：

由于现代浏览器的安全策略，特别是对于弹窗窗口的限制，直接使用 window.open 可能会被浏览器阻止或放入通知中心，尤其是当它是由非用户直接操作触发的时候（比如响应鼠标点击以外的事件）。

关于 window.location.href 和 window.open 的区别，也贴在下面：

window.location.href：

• 它会改变当前窗口的URL和加载新页面，相当于在当前标签页/窗口中进行页面重定向。
• 当你设置 window.location.href 的值时，浏览器会立即停止当前页面的所有活动并开始加载新地址指向的页面。

window.open：

• 它会在一个新的浏览器窗口或标签页中打开指定的URL，不会影响当前窗口的内容。
• 如果没有指定窗口参数或者目标名称（例如 _blank），则默认在新窗口中打开链接。