前言

以前都是使用vue的脚手架或者是node.js中的路由配置，当用惯了这些后，在使用Umi发现路由怎么都配置不对，我淦！！！，这个游戏也太难了。配了半天也配不对，去官网研究了以下，发现是一个思维逻辑出现了错误。我们来看看。

提示：以下是本篇文章正文内容，下面案例可供参考

一、问题描述

我们就拿vue来说。

import Vue from 'vue'
import Router from 'vue-router'
//import Login from '.././views/login.vue'
//import NotFound from '.././views/404.vue'
//import Home from '.././views/index.vue'
Vue.use(Router)

export default new Router({
   
  mode: 'history',//去掉#号
  routes: [
      {
   
      path: '/',
      component: resolve => require(['../views/404.vue'],resolve)
    },
    {
   
      path: '/login',
      name: 'Login',
      component: resolve => require(['../views/login.vue'],resolve)
    },
    {
   
      path: '/404',
      name: 'NotFound',
      component: resolve => require(['../views/404.vue'],resolve)
    },
  ]
})

这是一段vue路由的配置,学习过vue的同学都知道，在地址栏中输入对应的路由他会跳转并显示对应的组件。Vue路由匹配默认是严格模式的。

我们再来看看Umi的路由

    routes: [
      {
   
        path: '/',
        component: '../layouts/index',
        routes: [
          {
    path: '/', component: './index'},
        ]
      },
      {
   path:'/login',component:'./user/index'},
    ],

在vue的路由代码中，我们在地址栏上输入‘/login’他会跳转到对应的页面，而在Umi中他会出现找不到页面 如图。

那么问题来了，为什么路由配置的时候vue中没有问题，但是在React中就会存在页面不存在的这种情况呢？

二、原因分析

这里我们来解释以下Umi路由匹配机制的运行逻辑。当我们在config或者umirs中配置了路由后，每当输入这个路由地址，程序回去config或umirs文件中去匹配对应的路由。（Umi中路由路由匹配默认是非严格模式，只要满足一点就会进行这个路由）需要注意配置文件中路径默认在pages中的
下属组件都在pages中，可以看到我这里使用的相对路径实在pages中的。

    routes: [
    //1、首先对 / 进行匹配 ， 发现/login 满足 / 
      {
   
        path: '/',
        component: '../layouts/index',
        routes: [
          {
    path: '/', component: './index'},
        ]
      },
      {
   path:'/login',component:'./user/index'},
    ],

当程序进入routers中时，向下查询，发现 / 这个路由，而我们地址栏中输入的时/login ，/login 是不是在 / 下面？（是）所以他就会进入 / 这个主路由中，再从 / 主路由中查找 /login路由，但是显而易见，我们在 / 路由下 没有配置 /login的子路由。因此他就会显示找不到页面。

三、解决

这里提供两种方法。

  • 1 、让路由匹配变为严格模式。 
    routes: [
    //1、首先对 / 进行匹配 ， 发现/login 满足 / 
      {
   
        path: '/',
        component: '../layouts/index',
        exact:true,
        routes: [
          {
    path: '/', component: './index'},
        ]
      },
      {
   path:'/login',component:'./user/index'，exact:true},
    ],

在 / 路由中添加 exact属性。来让路由变为严格模式。exact官网解释地址

  • 2、把/login这个路由配置放在 / 路由之前 
    routes: [
      {
   path:'/login',component:'./user/index'},
      {
   
        path: '/',
        component: '../layouts/index',
        routes: [
          {
    path: '/', component: './index'},
        ]
      },
      
    ],

如上述配置即可，我们看到当 路由地址中输入 /login的时候，程序进行配置文件中，找到router这个属性进行从上向下匹配。第一个路由时/login，就会进入这个路由。

总结

Umi中路由默认时非严格模式，vue中的路由默认是严格模式的。这个坑真的是搞死我了。