import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import City from '@/pages/city/City'
import Detail from '@/pages/detail/Detail'
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'Home',
component: Home
}, {
path: '/city',
name: 'City',
component: City
}, {
path: '/detail/:id',
name: 'Detail',
component: Detail
}],
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
})
这样会在首页一次性加载所有逻辑代码，
当app.js文件比较大时，用异步组件实现按需加载
export default new Router({
routes: [{
path: '/',
name: 'Home',
component: () => import('@/pages/home/Home')
}, {
path: '/city',
name: 'City',
component: () => import('@/pages/city/City')
}, {
path: '/detail/:id',
name: 'Detail',
component: () => import('@/pages/detail/Detail')
}],
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
})
使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
}
})
