vue router的滚动行为控制

红太狼 2022-12-21 09:24 131阅读 0赞

需求：某些路由切换时，滚动到指定位置而不是顶部。

const routes = [
          {
                path: "live",
                name: "live",
                component: live,
                meta: {
                  scrollCustom: true //滚动到指定位置
                }
              },
        {
                path: "course",
                name: "course",
                component: course,
                meta: {
                  scrollCustom: true //滚动到指定位置
                }
              },
    ]

const router = new VueRouter({
      // mode: "history",
      base: process.env.BASE_URL,
      routes,
      scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
          return savedPosition;
        }
        if(to.meta.scrollCustom) {
          return { x: 0, y: 350 } //meta中有scrollCustom的就滚动到指定位置
        } else {
          return { x: 0, y: 0, } //meta中没有scrollCustom的就滚动到顶部
        };
      },
    });
    
    //使得重复点击路由不报错
    const originalPush = VueRouter.prototype.push;
    VueRouter.prototype.push = function push(location) {
      return originalPush.call(this, location).catch((err) => err);
    };
    /* 路由发生变化修改页面title */
    router.beforeEach((to, from, next) => {
      if (to.meta.title) {
        document.title = to.meta.title
      }
      next()
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，131人围观）

还没有评论，来说两句吧...

相关阅读

相关【Vue Router】015-滚动行为*

1.15 滚动行为\ > 直接贴文档吧，使用时再进行详细探索，很难所有功能都亲自实现一遍！ 1.15.1 概述使用前端路由，当切换到新路由时，想要页面滚到顶部，

痛定思痛。/ 2023年10月01日 11:35/ 0 赞/ 14 阅读

相关 Vue router 单页面的控制中心

vue-router 路由就是组件之间进行切换的。路由的配置 router/index.js import Vue from 'vue'

秒速五厘米/ 2023年05月31日 06:53/ 0 赞/ 7 阅读

相关 vue-router的addRoute方法实现权限控制

在项目实践中，往往需要用户登录后由后端返回用户的权限，来动态配置路由,vue-router提供了两个方法router.addRoutes(),router.addRoute()

末蓝、/ 2023年01月17日 08:44/ 0 赞/ 123 阅读

相关 vue router的滚动行为控制

需求：某些路由切换时，滚动到指定位置而不是顶部。 const routes = [ { path: "live",

红太狼/ 2022年12月21日 09:24/ 0 赞/ 132 阅读

相关 vue-router—7滚动行为

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9q

怼烎@/ 2022年10月01日 07:56/ 0 赞/ 308 阅读

相关 vue-auto-focus:控制自动聚焦行为的vue指令

在网页的表单中，经常需要用程序来控制input和textarea的自动聚焦行为。例如我最近做的一个项目，有个装箱出库的流程，input框自动聚焦的流程如下：页面进入时自动聚焦到

待我称王封你为后i/ 2022年07月11日 01:54/ 0 赞/ 183 阅读

相关 vue-router中的滚动行为

滚动行为：使用前端路由，当切换到奥新路由时，想要页面滚动到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router,可以自定义路由切换时如何滚动这个功

左手的ㄟ右手/ 2022年05月19日 01:28/ 0 赞/ 181 阅读

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

//路由跳转后，页面回到顶部 router.afterEach(() => { document.body.scrollTop = 0;

短命女/ 2022年04月17日 03:39/ 0 赞/ 706 阅读

相关 Vue scrollBehavior 滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 `vue-router` 能做到，而且更好，它让你可以自定义路由切换时页面如

野性酷女/ 2022年03月08日 06:12/ 0 赞/ 223 阅读

相关 vue-router—16滚动动画

需求看下面，当我点击左侧的时候，右侧就会定位到某一块，看一下要怎么做 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_te

Myth丶恋晨/ 2022年01月16日 07:07/ 0 赞/ 234 阅读