[Vue Router warn]: No match found for location with path "/xxx/xxx"

[chinaliyun]

描述

正常的页面跳转没问题, 但是在浏览器中刷新页面后, 控制台暴露的一个警告, 但是页面正常显示了

出现这个问题的大部分项目可能都是因为参考了某开源前端框架的写法, 类似于这样:

router.beforeEach((to, from, next) => {
  addRoutes(); // 这个函数内部是动态添加路由的
  // ...
  if (to.name) {
    next();
  } else {
    next({
      path: to.path,
      query: to.query,
    });
  }
});

我见过很多的 vue-spa 项目都是类似于这样的写法, 虽然另辟蹊径, 刷新浏览器的时候能够正常打开页, 但始终会有[Vue Router warn]: No match found for location with path "/xxx/xxx"的警告

作为严重代码洁癖的人, 是绝对不允许项目中有 warning 出现的

解决方案

其实出现这个警告的原因很简单, 项目中不应该在router.beforeEach中动态加载路由.

当打开一个动态加载的路由页面时, router 先通过 url 找到匹配的路由, 这个动作是在beforeEach之前发生的, 也就是说 url 对应的路由还没有被加载到 routes 中, router 肯定找不到 url 匹配的路由信息, 自然会抛出找不到路由的警告信息.

正确的做法要完成两个部分:

1. 是在app.use(router)之前, 就把动态路由设置好

// main.ts

import { createApp } from "vue";
import { router } from "./router";
const app = createApp(App);

await initRoutes(); //  这里, 先动态加载路由
app.use(router); // 再把路由注入App

2. 用户完成登录之后, 在跳转到下一个页面之前, 重新设置动态路由

// login.vue

async function login() {
  // 登录账户操作
  await initRoutes(); //  先重新动态注入路由
  router.push(); // 再跳转页面
}

[c99czy]

very goods.

[c99czy]

very goods.