今天的总结是解决两个小问题的过程，项目初步完成后，组内测试时发现了两个常见却又易被忽视的问题，一是标题不固定，随鼠标移动做移动，二是页面滚动行为问题，具体如下面动图描述；

修改前：

一、标题栏固定

一个个解决首先来看一下这个标题栏移动的问题，解决方案如下-设置标题栏定位Position：

• absolute：生成绝对定位的元素，元素的位置通过"“1eft"，“top”，"right"以及"bottom”属性进行规定；
• fixed：生成绝对定位的元素，相对于浏览器窗口进行定位
• relative：生成相对定位的元素，相对于其正常位置进行定位
• static：默认值，没有定位

// 导航栏
<van-nav-bar
     class="brainstorm"
     title="头脑风暴"
>
</van-nav-bar>

/* 导航栏背景颜色及定位 */
.brainstorm{
      position: fixed;
      width:100%;
}

二、路由切换时，始终回到页面最顶部

1. 导航守卫

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方法

2. Vur Router提供的scrollBehavior 方法-简单的让页面滚动到顶部

// 每次做路由切换时，始终回到最顶部
scrollBehavior (to, from, savedPosition) {
    return { x: 0, y: 0 }
 }
  

• to:Route: 即将要进入的目标路由对象
• from: Route: 当前导航正要离开的路由
• savedPosition: Function: 接收to和from
  路由对象，格式为：{ x: number, y: number }

项目中使用了路由守卫，所以这里是采用了第一种方式来解决目前的问题，我们也可以根据自己的业务需求进行设置页面滚动位置，更详细滚动行为可参考官网：滚动行为

完成以上操作项目中的两个小问题也就解决了，下面是解决之后的样式：