vue-router踩坑之history模式的scrollBehavior
来源:互联网 发布:中国国籍知乎 编辑:程序博客网 时间:2024/05/29 16:53
mode: 'history',
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
if (savedPosition) {
return savedPosition
}
else {
return { x: 0, y: 0 }
}
},
可以实现保留浏览位置的效果
过程中用了传统的直接改location.href,但该模式下,若页面中有通过js直接改locaion.href的情况,则会出现那个页面一直在类似刷新的状况。
解决:通过this.$router.push()的方式来改变url以及url中的参数
微信与浏览器差异:
js中写windows.open()和直接用a标签微信中效果不一样::window.open()效果是调到页面,让用户选择复制链接地址,而a标签是直接在当前页面打开
但是,npm run build时遇到问题:index.html打开后一片空白,也没任何报错,原因:
https://router.vuejs.org/zh-cn/essentials/history-mode.html webpack 打包vue-router为history 打开空白没报错
去掉history模式,打包后传到服务器发现可以保留列表原来停留的地方。。。。。
测试发现:
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
if (savedPosition) {
// alert(savedPosition.y);
return savedPosition
}
else {
return { x: 0, y: 0 }
}
},
这段代码在history模式下也是有记录原来停留位置的功能 的,如果注释掉该段代码,就会不能回到原来浏览的位置。
实际情况如此,但官网说是只有在historym模式下
- vue-router踩坑之history模式的scrollBehavior
- vue-router的HTML5 History 模式
- vue-router HTML5 History 模式
- vue-router 的 hash 模式与 history 模式
- tomcat服务如何配置vue-router的history模式
- vue-router使用history的配置问题
- vue+vue-router+vue-resource踩坑之路由不起作用
- vue-router HTML5 History 模式(转自官网)
- vue-router使用 history 模式刷新后404问题
- servlet中使用vue-router history模式&前端配置记录
- vue的HTML5 History 模式
- vue之vue-router
- Vue之Vue-router
- vue-router下的html5 history在iis服务器上的设置 vue去掉#
- vue-router菜鸟进阶!(路由组件传参 vs H5 History模式)
- vue2.0之vue-router的神坑 router-view不显示
- Vue之vue-router的编程式导航
- vue-router 的属性
- mysql sql语句表操作
- 回溯法-5.5.1 n皇后问题之递归法
- 机器学习中的数据使用
- 使用Redis实现锁机制
- CSS3 伪类和伪元素
- vue-router踩坑之history模式的scrollBehavior
- Android Studio插件GenerateFindViewById
- 函数递归
- Disconnected: No supported authentication methods available)FileZilla通过SSH连接Linux服务器( CentOS)
- flask web 开发 MarkDown 存储,读取问题
- rxjava2代码实战2--zip操作符
- 使用spring-boot-starter-mail实现邮件发送
- C中的位级运算
- 删除公共字符