I can achieve smooth-scroll router-links with:
<router-link :to="{ hash: 'home' }">Home</router-link>
<router-link :to="{ hash: 'about' }">About</router-link>
and router.js:
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../vue/home";
import About from "../vue/about";
Vue.use(VueRouter);
export default new VueRouter ({
mode: "history",
routes: [
{path: "/", name: "home", component: Home},
{path: "/about", name: "about", component: About},
],
scrollBehavior(to, from, savedPosition) {
return {
selector: to.hash,
behavior: 'smooth'
}
}
});
The smooth-scroll effect is a bit slow compared to vue's v-smooth-scroll class. Is there any way to control the smooth-scroll speed of VueRouter?
No.
Vue Router's Smooth Scrolling in implementing the native browser API ScrollToOptions.behavior. This is controlled by the client's browser. This can differ from system to system.