Vue-Router的属性详解-自我理解-replace和app

1.replace

类型: boolean

默认值: false

设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。

  <router-link :to="{ path: '/abc'}" replace></router-link>

如上：API是这么描述的，说实话我其实真没大理解history，最后百度之后，然后自己尝试才明白。

我的理解
关键字： 导航后不会留下 history 记录。 这是啥意思啊？--我反正当时真的没反应过来。好了不废话，我来解释解释。

场景1： 页面1——to——> 页面2 ——replace——>页面3
（此时你点后退会回到哪个页面？——答案是：页面1）

场景2：打开窗口 ——to——>页面1 ——replace——>页面2
（此时你点后退会回到哪个页面？——答案是：刚刚打开窗口那个页面）

这样你看懂了吗？ replace过去的页面，后退的时候，这个过来时候的操作将不被记录在返回的历史当中，如果用户点击后退的话，就是它前一个面的后退。这就是为什么说 导航后不会留下history记录。

2.append

类型: boolean

默认值: false

设置 append 属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

  <router-link :to="{ path: 'relative/path'}" append></router-link>

如上：API是这么描述的，我理解了，但是刚开始没试成功。

我的理解
关键字： 则在当前 (相对) 路径前添加基路径

是这样吧，他这个:to="{ path: 'relative/path'}"写法有点迷惑性。我改改

  <router-link :to="{ path: yemian'}" append></router-link>

好了我该成这样了，然后呢？注意我前面是没有加 / 斜线的。如果加了斜线会怎么样？当然是跳转路由啦~ 去了你那个/path的页面了。所以这点要注意哦。

这里还是有两个场景

场景1：http://localhost:8080/ （首页）下面-----append(yemian)--->?去哪里？
（答案： 去http://localhost:8080/yemian 这个页面了 ）

场景2 ：http://localhost:8080/yemian1-----append(yemian)--->?去哪里？
（答案： 去http://localhost:8080/yemian1 /yemian 这个页面了 ）

这样是不是清晰啦？