关于vue跳转后页面置顶的问题

目录

• vue跳转后页面置顶
• vue如何实现置顶

vue跳转后页面置顶

今天测试指出我的项目跳转页面时未置顶，嗯，这个太影响用户体验了。

但是办法总会有哒！No Problem!

只需在路径上匹配一段关于scroll方法即可，

我简单截取一段我的代码以作演示：

或者使用这段代码：

afterEach (to, from, next) {
    window.scrollTo(0, 0)
}

但是还有个问题依旧没有彻底克服！

比如，如果当前页面是首页，点击页面中的"首页"选项后，却依然不置顶，那么只能老老实实的增加个回到顶部了。

 toYpWebsite () {
      // this.$router.push('/ypWebsite')
      document.body.scrollTop = document.documentElement.scrollTop = 0
 },

即

document.body.scrollTop = document.documentElement.scrollTop = 0

这两条就可以解决关于页面置顶的问题，哈哈，测试没辙了！

vue如何实现置顶

new.json 数据代码：

[
  {"id": "G11111","title": "手机","price": 2999},
  {"id": "G22222","title": "平板电脑","price": 1999},
  {"id": "G33333","title": "笔记本电脑","price": 5999},
  {"id": "G44444","title": "树莓派电脑","price": 999},
  {"id": "G55555","title": "超级计算机","price": 9999999}
]

具体代码如下：

    
    
    
    



    

        
{{ pr.id }} {{pr.title}} ￥{{pr.price}}
            {{hello}}
        
    

效果图如下：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。