vue路由的两种模式

touka
144 阅读2分钟

vue路由的两种模式

hash模式

vue-router默认使用hash模式

  • location.hash 的值就是URL中#后面的内容
  • URL中hash值只是客户端的一种状态，也就是说当向服务端发出请求时，hash部分不会被发送
  • hash值的改变，都会在浏览器的访问历史中增加一个记录。因此我们可以通过浏览器的回退、前进控制hash的切换
  • 可以通过a标签，并设置href属性，当点击这个标签后，URL的hash值会发生改变；或者使用JS来直接对location.hash进行赋值，也可以改变URL的hash值
  • 可以使用hashchange事件来监听hash值的变化，从而进行页面跳转
  • 可通过push方法将新路由添加到浏览器访问历史栈顶；或通过replace方法替换当前的路由

history模式

修改浏览器的历史记录

HTML5提供了History API来实现URL的变化。其中最主要的API有两个：history.pushState()和history.replaceState()。这两个API可以在不进行刷新的情况下，操作浏览器的历史记录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录，

window.history.pushState(state, title, url)
window.history.replaceState(state, title, url)

参数：

state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。不需要这个对象，此处填null

title：新页面的标题。但是，现在所有浏览器都忽视这个参数，所以这里可以填空字符串或null

url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

切换浏览器历史记录

history.go(-2);//后退两次
history.go(2);//前进两次
history.go(0);//刷新当前页面
history.back(); //后退
hsitory.forward(); //前进

  • 符合URL地址规范，不需要#

  • pushState和replaceState两个API来操作实现URL 的变化

  • 可以使用popstate事件来监听URL的变化，从而进行页面跳转

    window.onpopstate = function(event) {}

  • history.pushState()和history.replaceState()不会触发popstate事件，这时需要我们手动触发页面跳转

  • 在用户手动输入地址或刷新页面时会发起URL请求，后端服务需要进行相关配置，否则浏览器直接访问就会返回404

avatar
文章
阅读
粉丝