search

ZhangHang12135 / ZhangHang12135.github.io

New Blog
1 stars 0 forks source link

vue-router相关 #6

Open ZhangHang12135 opened 2 years ago

ZhangHang12135 commented 2 years ago

1. hash 和 history的区别？ 在vue3的中，用createWebHashHistory 和 createWebHistory来表示hash 和 history。 从源码上来看，createWebHashHistory就是给 base 末尾添加了'#'号，然后调用createWebHistory。 从实际效果上分析，

  1. hash模式占用了锚点位， 手动改变路径（直接输入改变地址栏url）不会重新请求文档。
  2. history模式，手动改变路径会重新请求服务端，因为这是浏览器默认事件。
  3. 调用router.push（router-link）不会触发页面重载，因为两者都是利用pushState, 来改变url路径。
  4. 对于history，需要服务器配置。可以是nginx的兜底策略，将所有没有资源的路径指向index。 在vue2中，hash和history是单独处理的，但是两者都是popstate事件，对于hash，只有在没有popstate方法时，监听的是hashchange事件。
ZhangHang12135 commented 2 years ago

2. 为什么hash的路由不会触发浏览器锚点？ 因为vue-router 利用history.pushState(), 添加堆栈状态。pushState是不会触发hashchange事件的。 先问是不是，再问为什么 是会触发的。 假设你 路径是 http://localhost:8042/#/info 。你在根html上加了一个id为info的元素。 当你手动输入 http://localhost:8042/#info 时，是会触发锚定效果的。并且url会变回 http://localhost:8042/#/info 。 之所以我们感觉vue没有锚定效果

  1. 我们不会有其它的id 出现
  2. url后面的#后面有/ ， (不会出现id开头为 '/'的情况，因为html规定就是字母开头, html4的规定， 在html5中已经解除)（所以这一项不存在。）
  3. 如果id 为/info，不会出现锚定效果。个人猜测原因如下：当输入 http://localhost:8042/#/info 时，app还没加载完成，刚准备滚动的时候，app的内容加载出来了，造成页面回流，停止了滚动。