zoukankan      html  css  js  c++  java
  • Vue控制路由滚动行为

    跳转路由时,要求跳转到指定路由的某个地方,可以使用scrollBehavior方法控制。

    用法:

    scrollBehavior(to,from,savedPosition){   }

    scrollBehavior方法可以返回x,y 坐标点,也可以返回指定的选择器

    例子:

    import Vue from 'vue'
    import Router from 'vue-router'
     import Home from '../../view/Home.vue'
     import Test from '../../view/Test.vue'
     import News from '../../view/News.vue'
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          name:"Home",
          component:Home,
          path:"/"
        },
        {
          name:"Test",
          component:Test,
          path:"/test"
        },
        {
          name:"News",
          component:News,
          path:"/news"
        },
        {
          
          path:"*",
          redirect:"/"
        }
      ],
      mode:"history",
      //跳转到指定路由的指定坐标
      scrollBehavior(to,from,savedBehavior){
         if(to.path==="/test"){
            return {
              x:0,
              y:100
            }
         };
         // 跳转到指定的选择器
         if(to.path==="/news"){
          return {
            selector:".here"
          }
         }
      }
    })
  • 相关阅读:
    Oracle性能调整ASH,AWR,ADDM
    子网掩码、子网划分详解
    10046事件sql_trace跟踪
    find详解
    date详解
    touch详解
    [转]lsof详解
    iftop、ifstat详解
    iotop详解
    关于Unity的入门游戏飞机大战的开发(上)
  • 原文地址:https://www.cnblogs.com/luguankun/p/10744058.html
Copyright © 2011-2022 走看看