解决Vue-Router动态添加路由刷新报错：指路明灯助你轻松搞定

2023-07-23 14:34:31

在 Vue-Router 中动态添加路由时的常见问题解决方案

当您在前端开发中使用 Vue-Router 来管理路由时，可能会遇到一个常见问题：当您从后端获取路由并通过 router.addRoute() 动态添加到 Vue-Router 时，页面刷新后可能会出现 "No match found for location with path" 的报错，或导致用户重新登录。

问题根源

这个问题的根源在于，页面刷新后，Vue-Router 无法找到与当前 URL 匹配的路由，从而导致报错或重新登录。

解决方法

要解决这个问题，我们可以采用以下步骤：

1. 保存用户信息

在页面加载时，使用 sessionStorage 或 localStorage 保存用户信息。

2. 更新 Vuex Store

在 Vuex Store 中定义一个用户状态，并在页面加载时从本地存储中获取用户信息并写入 Vuex Store。

3. 添加路由守卫

在路由守卫中，检查用户是否已登录，如果没有，则重定向到登录页面。

4. 动态添加路由

在路由配置中，使用 router.addRoute() 动态添加从后端获取的路由。

代码示例

// 在页面加载时保存用户信息
window.addEventListener('load', () => {
  const userInfo = JSON.parse(localStorage.getItem('userInfo'));
  if (userInfo) {
    store.commit('setUser', userInfo);
  }
});

// 在 Vuex Store 中定义用户状态
const store = new Vuex.Store({
  state: {
    user: null,
  },
  mutations: {
    setUser(state, userInfo) {
      state.user = userInfo;
    },
  },
});

// 在路由守卫中检查用户是否登录
const authGuard = (to, from, next) => {
  const user = store.state.user;
  if (!user) {
    next('/login');
  } else {
    next();
  }
};

// 在路由配置中使用 router.addRoute() 动态添加路由
const routes = [
  {
    path: '/',
    component: HomeComponent,
  },
  {
    path: '/login',
    component: LoginComponent,
  },
];

const router = new VueRouter({
  routes,
});

router.beforeEach(authGuard);