zoukankan      html  css  js  c++  java
  • vue-router 滚动行为封装示例

    官方文档

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    
    const Home = { template: '<div>home</div>' }
    const Foo = { template: '<div>foo</div>' }
    const Bar = {
      template: `
        <div>
          bar
          <div style="height:500px"></div>
          <p id="anchor">Anchor</p>
        </div>
      `
    }
    const scrollBehavior = (to, from, savedPosition) => {
      if (savedPosition) {//返回之前的原位置
        // savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
        return savedPosition
      } else {
        const position = {}
        if (to.hash) {//如果路径中有哈希值,就采用锚点定位
          position.selector = to.hash
        }
        if (to.matched.some(m => m.meta.scrollToTop)) {//如果路由元信息中存在参数,对参数做进一步判断(此示例代表滚动到顶部)
          position.x = 0
          position.y = 0
        }
       //如果返回一个 falsy (假的值),或者是一个空对象,那么不会发生滚动。
        return position
      }
    }
    
    const router = new VueRouter({
      mode: 'history',
      base: __dirname,
      scrollBehavior,
      routes: [
        { path: '/', component: Home, meta: { scrollToTop: true }},
        { path: '/foo', component: Foo },
        { path: '/bar', component: Bar, meta: { scrollToTop: true }}
      ]
    })
    
    new Vue({
      router,
      template: `
        <div id="app">
          <h1>Scroll Behavior</h1>
          <ul>
            <li><router-link to="/">/</router-link></li>
            <li><router-link to="/foo">/foo</router-link></li>
            <li><router-link to="/bar">/bar</router-link></li>
            <li><router-link to="/bar#anchor">/bar#anchor</router-link></li>
          </ul>
          <router-view class="view"></router-view>
        </div>
      `
    }).$mount('#app')
    
  • 相关阅读:
    select @@identity的用法
    类的实践
    UVA 1572 SelfAssembly(图论模型+拓扑排序)
    UVA 10562 Undraw the Trees(多叉树的dfs)
    sprintf与sscanf用法举例
    UVA 10129 Play on Words(欧拉回路)
    UVA 816 Abbott's Revenge(bfs)
    递增【二分】
    递增【二分】
    递增【二分】
  • 原文地址:https://www.cnblogs.com/mengfangui/p/12297341.html
Copyright © 2011-2022 走看看