项目总结

一，vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法：

1.当创建一个Router实例，你可以提供一个scrollBehavior方法：

const router = new VueRouter({ 
    routes: [...], 
    scrollBehavior (to, from, savedPosition) {  // return 期望滚动到哪个的位置 }}
)

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

这个方法返回滚动位置的对象信息，长这样：

{ x: number, y: number }{ selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

如果返回一个 falsy (译者注：falsy 不是 false，参考这里)的值，或者是一个空对象，那么不会发生滚动。

举例：

scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 }}

对于所有路由导航，简单地让页面滚动到顶部。

返回 savedPosition，在按下 后退/前进 按钮时，就会像浏览器的原生表现那样：

scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {  return savedPosition 
    } else {  return { x: 0, y: 0 } }
}

我们还可以利用路由元信息更细颗粒度地控制滚动。

routes: [ 
    { path: '/', component: Home, meta: { scrollToTop: true }}, 
    { path: '/foo', component: Foo }, 
    { path: '/bar', component: Bar, meta: { scrollToTop: true }}
]

2.可以试试在main.js入口文件配合vue-router写下面代码：

router.afterEach((to,from,next) => {  window.scrollTo(0,0);});

3.可以在APP.vue中添加监听

watch: {    
    $route: function(to, from) {      
        window.pageYOffset = 0     
        document.body.scrollTop = 0     
        document.documentElement.scrollTop = 0    
    }
}

总结：以上不管哪种方法，CSS样式html,body的height都不能设置成100%，否则不生效，可改为min-height:100%

二、元素占满屏-------有时发现元素设置height：100%没起作用，可改为：

  height: 100vh;//vh即是占满屏

三、css属性touch-action:none;该属性会导致安卓页面无法滚动，慎用!

四、去除ios 手机端input输入框的内阴影

input{ 
    -webkit-appearance: none; 
}

五、安卓手机端div里面在包一层div，文字展示不居中的问题。

最好给div设置padding ，不固定高度和不设置line-height；

六、element-UI 框架 el-input 触发不了 @key.enter事件

解决方案：使用@key.center.native

<el-input v-model="form.loginName"
placeholder="账号" 
@keyup.enter.native="doLogin">
</el-input>