# vue 路由

# 滚动行为 scrollBehavior

需求: 在切换路由的时候,有些页面需要保持的原先的滚动位置

自己项目的实现
注意: 滚动条时发生在这个页面的根目录上(不确定是不是这么回事儿,否则自己都弄不出来)

<!DOCTYPE html>
<html lang>
  <head>...</head>
  <body class>...</body>
</html>

1
2
3
4
5

# 实现代码

步骤:

在路由的文件中:添加meta-top标签 ; scrollBehavior函数
在需要记录滚动条位置的vue文件中: 监听滚动修改路由meta-top的值

路由上加meta标签
scrollBehavior API实现

// router/index.js
import {
  createRouter,
  createWebHashHistory
} from 'vue-router'

const routes = [
  // 路由学习 一些参数
  {
    path: '/routerxx',
    name: 'routerxx',
    component: () => import('@/views/routerxx/index.vue'),
    children: [{
        path: 'router1',
        name: 'router1',
        component: () => import('@/views/routerxx/router1.vue'),
        meta: {
          top: 0
        }
      },
      {
        path: 'router2',
        name: 'router2',
        component: () => import('@/views/routerxx/router2.vue')
      },
    ]
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    if (savedPosition) {
      // savedPosition 就是点击浏览器上的<- ->的左右箭头
      return savedPosition
    } else {
      return {
        left: 0,
        top: to.meta.top || 0
      }
    }
  }
})

export default router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

//vue文件中
  window.addEventListener('scroll', e => {
    console.log('监听滚动条的滚动', window.scrollY, this.$route)
    // 实时监听滚动条位置
    this.$route.meta.top = window.scrollY
  })

  activated() {
    window.addEventListener('scroll',()=>{})
  },
  deactivated() {
    document.removeEventListener('scroll', () => {})s
  },

1
2
3
4
5
6
7
8
9
10
11
12
13

vue文件中的内容还可以改进,防抖来监听scroll方法,

# 问题(代码修改)

//vue文件中
  window.addEventListener('scroll', e => {
    console.log('监听滚动条的滚动', window.scrollY, this.$route)
    // 实时监听滚动条位置
    this.$route.meta.top = window.scrollY
  })

1
2
3
4
5
6

自己在项目中试的时候,上面亮的这一行,在从其他路由切换回来的时候,发现route中meta的top还是0,
所以自己将监听滚动的时候将top存到了本地缓存中 localStorage.setItem('top', window.scrollY)
用路由全局前置守卫修改 meta - top 值:

// router index.js
router.beforeEach((to, from) => {
  // ...
  if (to.fullPath === '/routerxx/router1') {
    to.meta.top = localStorage.getItem('top')
  }
  // 返回 false 以取消导航
  return true
})

1
2
3
4
5
6
7
8
9

← vue基础 vue.config.js →