Vue-scroll-behavior：便捷定制导航路径上的滚动行为，尤其在 hash 模式下Vue-scroll-be

Demo

You can check vue-scroll-behavior demos at:

Simple: jeneser.github.io/vue-scroll-…

Installation

NPM

npm install vue-scroll-behavior --save

import vueScrollBehavior from 'vue-scroll-behavior'

Vue.use(vueScrollBehavior, { router: router })

Direct include

If you are using Vue globally, just include vue-scroll-behavior.js and it will automatically install it. Then, you need call Vue.$vueScrollBehavior(router) pass the router instance router.

<script src="path/to/vue-scroll-behavior.js"></script>

<script>
  Vue.$vueScrollBehavior(router)
</script>

CDN

<script src="https://unpkg.com/vue-scroll-behavior@0.1.5/dist/vue-scroll-behavior.js"></script>

Description

When using client-side routing, we may want to scroll to top when navigating to a new route, or preserve the scrolling position of history entries just like real page reload does. vue-router allows you to achieve these and even better. But, vue-router scroll behavior feature only works in HTML5 history mode...

vue-scroll-behavior allows you to completely customize the scroll behavior in HTML5 history mode and hash mode.

Features

Simplicity - only need to call Vue.vueScrollBehavior(router)
Compatibility - Working in HTML5 history mode and hash mode

Example

When used with a module system, you can install it via Vue.use(), then pass some opts:

import Vue from 'vue'
import router from './router'
import vueScrollBehavior from 'vue-scroll-behavior'

// Using vueScrollBehavior
Vue.use(vueScrollBehavior, {
  router: router,
  maxLength: 100,
  ignore: [/\/boo/, /\/zoo/],
})

For additional examples and detailed description check the demo. jeneser.github.io/douban

You can clone this repository. Check the silmp demo.

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

Options

List of available Options:

Prop	Data Type	Default	Description
`router`	Object		The router instance: `const router = new VueRouter({})`
`ignore`	Array	`[ ]`	RegExp list to ignore some routes
`maxLength`	Number	`50`	Saved history List max length

ChangeLog

June 4, 2017:
- Fix some bug, Perform browser testing
- Publish @0.1.2
June 5, 2017:
- Publish @0.1.3
- Publish @0.1.4
June 7, 2017:
- Publish @0.1.5 Add some opts

Contribute

Please make sure to read the Contributing Guide before making a pull request.

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build library and demo for production
npm run build

Vue-scroll-behavior：便捷定制导航路径上的滚动行为，尤其在 hash 模式下