背景在vue的前端项目开发中，我们经常会使用编程式路由来完成导航页面的切换。大家基本都会用到this.$router.push这个方法。常用的使用方法有：this.$router.push({name:'a'});this.$router.push({path:'/a'})在项目开发过程中，我使用了push方法使用上面的第二种方法，但是我写的方式没有包含'/'，我当时的路由假设是'/a'，执行下面的方法，我的页面切换到'/b'，是一样的正如我们的写法不一致，但是路径跳转是正常的。this.$router.push({path:'b'})在研究阶段想知道路径匹配的方式是从根路由开始用'/'代替，但是如果不带'/'，为什么一切正常？查了官方文档，官方也有不带'/'的写法，但是没有说明具体逻辑。于是就去看了官方的源码。一路跟着push方法，发现utils/path.js有一个方法可以处理路径：charAt(0)if(firstChar==='/'){returnrelative}if(firstChar==='?'||firstChar==='#'){returnbase+relative}conststack=base.split('/')//删除尾部段如果：//-不追加//-追加到尾部斜杠（最后一段为空）if(!append||!stack[stack.length-1]){stack.pop()}//解析相对路径constsegments=relative.replace(/^\//,'').split('/')for(leti=0;i{describe('resolvePath',()=>{it('absolute',()=>{constpath=resolvePath('/a','/b')期望(path).toBe('/a')})it('relative',()=>{constpath=resolvePath('c/d','/b')expect(path).toBe('/c/d')})it('relativewithappend',()=>{constpath=resolvePath('c/d','/b',true)expect(path).toBe('/b/c/d')})it('相对父',()=>{constpath=resolvePath('../d','/a/b/c')expect(path).toBe('/a/d')})it('带追加的相对父级',()=>{constpath=resolvePath('../d','/a/b/c',true)expect(path).toBe('/a/b/d')})it('相对查询',()=>{constpath=resolvePath('?foo=bar','/a/b')expect(path).toBe('/a/b?foo=bar')})it('相对哈希',()=>{constpath=resolvePath('#hi','/a/b')expect(path).toBe('/a/b#hi')})})...})结合实际代码和测试用例，我们发现：当我们原来的路径是/a,当我们push({path:b}),最后生成'/b'当我们原来的路径是/a/c,当我们push({path:b}),最后生成'/a/b'当然还有其他情况，但是解决了我对当前跳路径的疑惑。如果你有兴趣，你也可以试试其他的方法。'../b'等方法，但是官方文档中并没有标明这些使用方法，所以大家还是尽量按照标准的方法。我希望它能解决你关于官方文件路径前没有'/'的具体问题。
