开发中论一道杠的重要性

在项目中我们经常会用到img标签，路由path，路由baseUrl，axios的baseUrl等诸多设计文件路径的场景。

今天，我就我在实际的开发中遇到的几个问题，引出相对路径是绝对路径，这两个大家耳熟能详，但又经常会栽跟头的两个问题。

问题1：开发中，我需要判断当前页面的path，来决定将要跳转页面的地址。

举例来说：判断当前页面是people还是org，决定跳转的页面是peopleDetail还是orgDetail。

项目搭建：vue2+router

我当时的决绝思路是:

(1) 获取当前的路径path，this.$route.path(因为我的项目框架是vue，因此还可以使用this)

(2) 利用router的resolve，拼接跳转的链接href。

       

this.$router.resolve({
    path: `${this.$route.path} == '/people' || ${this.$route.path} =='/people/' ? 'peopleDetail' : 'orgDetail'`,
    query: {
        id: this.id // 相关查询参数
    }
})

问题就来了，如果当前页面的路径是XXX/pelple还好，正常跳转。当路径是XX/people/，跳转就有问题了，跳转到XXX/people/peopleDetai。

重点解决：在path前面加一个/，这样无论当前路径是什么。都会拼接到当前路径后面，而是从根目录开始。

问题2：在一次项目中，我们路由跳转方式由hash改成history（二期优化，测试阶段，还没上线），刚刚改成history时，部署到测试环境一切正常。重点来了。公司服务器要迁移，迁移后，路径中多了一个databalalla，这下大家就傻眼了，线上正常，为什么测试环境空空如也。

剖析下问题原因：

（1）线上正常，是因为使用的是hash模式，即使路径中多一个databalala也不受影响。XXX/databalala/#home，这就设计到路由的一点实现原理了，hash模式，获取当前路径的path仍是home，根据home来控制哪一个组件组件显示。因为线上风平浪静。

（2）测试空空如也，是因为测试环境是history模式，当路径变成XXX/databalala/home，router的history模式，获取当前路径的path是databalala/home， 根据这个path是找显示的组件，肯定是找不到的，因为开始route对象也就是咱们的router.js文件，就没有databala。

说点我对路由的理解：举个例子

const route = [
 {
    path: '/home',
    component: Layout,
    children: [
      {
        path: 'index',
        component: () => import('@/views/home'),
        meta: { title: '首页', icon: 'icon-home', permCode: 'home' }
      }
    ]
  },
]

那么会被解析成key value的形式，key就是路径，value就是组件。上面这个路由会被解析成：

‘/home/index’: import('@/viewhome')

当网页的路径是XX/home/index时，就可以找到对应的组件显示到网页了。

当我们的服务配置多了一个databalala，浏览器的path是databalala/home，而我们的路由生成的key value是 ‘/home’: '组件'。

因此当我们使用history时，需要特别注意路径问题，

重点解决：实例化路由时，添加baseUrl

let baseUrl = import.meta.env.MODE === 'development' ? '/datablau-test' : '/datablau';

export const router = createRouter({
	history: createWebHistory(baseUrl),
	routes: [...staticRoutes, ...notFoundAndNoPower],
});