今天的总结是解决两个小问题的过程，项目初步完成后，组内测试时发现了两个常见却又易被忽视的问题，一是标题不固定，随鼠标移动做移动，二是页面滚动行为问题，具体如下面动图描述；
修改前：
一、标题栏固定
一个个解决首先来看一下这个标题栏移动的问题，解决方案如下-设置标题栏定位Position：
- absolute：生成绝对定位的元素，元素的位置通过"“1eft"，“top”，"right"以及"bottom”属性进行规定；
- fixed：生成绝对定位的元素，相对于浏览器窗口进行定位
- relative：生成相对定位的元素，相对于其正常位置进行定位
- static：默认值，没有定位
// 导航栏
<van-nav-bar
class="brainstorm"
title="头脑风暴"
>
</van-nav-bar>
/* 导航栏背景颜色及定位 */
.brainstorm{
position: fixed;
width:100%;
}
二、路由切换时，始终回到页面最顶部
- 导航守卫
const router = new Router({ routes })
router.beforeEach((to, from, next) => {
// 让页面回到顶部
document.documentElement.scrollTop = 0
// 调用 next()，一定要调用 next 方法，否则钩子就不会被销毁
next()
})
- to:Route: 即将要进入的目标路由对象
- from: Route: 当前导航正要离开的路由
- next: Function: 调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数,所以一定要调用next方法
- Vur Router提供的scrollBehavior 方法-简单的让页面滚动到顶部
// 每次做路由切换时，始终回到最顶部
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
- to:Route: 即将要进入的目标路由对象
- from: Route: 当前导航正要离开的路由
- savedPosition: Function: 接收to和from
路由对象，格式为：{ x: number, y: number }
项目中使用了路由守卫，所以这里是采用了第一种方式来解决目前的问题，我们也可以根据自己的业务需求进行设置页面滚动位置，更详细滚动行为可参考官网：滚动行为
完成以上操作项目中的两个小问题也就解决了，下面是解决之后的样式：
