页面跳转方式

已注销
1,223 阅读1分钟

发现问题：最初开发时利用this.$router.push实现页面跳转，pushState添加历史状态，以便实现挽留弹窗；后来发现这种跳转模式使实现页面静态化的换肤参数存在但不生效。
原因分析：不生效是因为vue项目开发为单页面开发，webpack打包之后属于多页面，因此利用vue中的路由就没有作用。
解决尝试：由多页面来改变跳转页面方式：window.location.href，引发挽留弹窗的浏览器返回监听方法不起作用。
查找方案：查找得到pushState在浏览器上是需要进行页面交互的，轻点页面，就会出现弹窗~

一、多页面应用与单页面应用

1、多页面应用：页面跳转，通过http请求，后台服务器系统返回一个新的html文档；页面多次切换时，存在明显的卡顿。
2、单页面应用：首次请求为html，组件路径切换，内容变化但不请求http。
3、区别与特点：

  • 多页面：首屏时间快，搜索引擎优化效果好，页面切换慢
  • 单页面：页面切换快，首屏时间慢，SEO差

二、window.location

1、window.location.href(url)
href属于location上的属性，它返回的是当前页面打开URL地址，直接跳转新的页面；存在浏览历史记录，可以进行返回。
2、window.location.replace(newurl)
replace直接替换url，新的文档替换当前文档html，重新进行http请求；直接进行替换，没有浏览记录，返回是直接到上上个页面。
3、window.location.reload()
reload会直接提交数据，刷新页面，一般跟href作对比，form表单的数据提交。
4、区别与特点：两者后退时所回退的页面不一样
例子：假如a页面--->b页面--->c页面跳转至c页面，停留

  • window.location.replace("../c")，b页面的url会被c页面代替，点击后退按钮回退到a页面（最开始的页面）
  • window.location.href("../c")，b页面的路径会被c页面代替，点击回按钮回退的是b页面

三、window.history

1、window.history.replaceState(stateObj, title, url)
replaceState修改当前历史记录，而不是创建新的；当想要修改state对象或者更改history实体的话，可以使用replaceState
2、window.history.pushState(state, title, url)
pushState是在页面中添加一个状态值，在浏览器返回时监听，popstate将历史记录弹出

// 创建历史状态
pushHistory () {
  var state = {title: '微信切码页',url: '#'}  
  if (!history.state.title) {
    window.history.pushState(state, null, '#')
  }
},
// 进行监听
window.addEventListener('popstate', (event) => {
    this.$refs.popup.show()
}, false)

特别点：使用pushState进行挽留弹窗的话，在普通浏览器上需要进行页面交互才能监听到。

四、vue中路由

1、vue路由利用history模式的话，存在历史记录；利用push。

this.$router.push({
  name: 'wechat.copy',
  query: {
    activity: 'xxx'
    poplename: 'xxx'
  }
})

目前存在疑惑点：虽然有需要交互的说法，但是同事有用过同样方式来实现挽留弹窗的情况（方案和代码是一致的），仍在探索中，有同样分享的小伙伴积极留下评论，一起探讨哈~

avatar
文章
阅读
粉丝