vue router的滚动行为控制

红太狼 2022-12-21 09:24 117阅读 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 条评论，117人围观）

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

相关阅读

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

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

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

相关 vue router的滚动行为控制

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

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

相关 vue-router来控制用户登录权限

第一步：新建一个名字为permission的js文件，代码如下 import router from './router' import NProgres

快来打我*/ 2022年12月17日 05:25/ 0 赞/ 136 阅读

相关 vue-router—7滚动行为

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9q

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

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

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

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

相关 vue-router中的滚动行为

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

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

相关 vue(四)、vue router.push(),router.replace(),router.go()

1.router.push(location)=====window.history.pushState 想要导航到不同的 URL，则使用 router.push 方法。这

「爱情、让人受尽委屈。」/ 2022年05月14日 16:08/ 0 赞/ 227 阅读

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

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

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

相关 Vue scrollBehavior 滚动行为

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

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

相关 vue-router—16滚动动画

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

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