vue-router-smart-scroll
v0.1.2
Published
A vue-router plugin that enables configurable recall of scroll positions when visiting routes.
Downloads
13
Maintainers
Readme
vue-router-smart-scroll
A vue-router plugin that enables configurable recall of scroll positions when visiting routes.
Environments
This plugin supports Vue version 2 and is written in ES6. You will need a transpiler to run this plugin on older browsers.
Installation
yarn add vue-router-smart-scroll
npm install vue-router-smart-scroll
Usage
"Install" this plugin to an existing router instance like so:
import Router from 'vue-router';
import RouterSmartScroll from 'vue-router-smart-scroll';
const router = new Router({
mode: 'history', // using history mode is helpful for automatic savedPosition support on browser back/forward
routes: [], // whatever your routes are!
});
// Install & Configure Router Smart Scroll
RouterSmartScroll.install(router, {
// options in here
});
Options
RouterSmartScroll.install(router, {
// Exclude or Include all routes except ones whose parameters match an object
// only one of the include or exclude options should be used at one time
// use like so: exclude: { top: true } (and put params: { top: true } in your router-link :to)
exclude: false,
include: false,
// The default position to scroll to if one cannot be recalled or if the route has been excluded.
// It's usually best to leave this to 0, 0
defaultPosition: { x: 0, y: 0 },
});
Matching route parameters
Using the exclude
or include
options to match route paratemers is super easy!
$route = { name: 'home', params: { lastPosition: true, someOtherParam: false } }
RouterSmartScroll.install(router, {
include: { lastPosition: true } // performs _.isMatch on $route.params
});