在项目中我们经常会用到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], });