import Vue from ‘vue‘
import Router from ‘vue-router‘
Vue.use(Router)
import UserInfo from ".././userInfo.vue";
import ChangeCommunity from ".././ChangeCommunity.vue";
var vueRouter= new Router({
routes: [
{
path: ‘/‘,
name: ‘UserInfo‘,
component: UserInfo,
meta: {
title: ‘我的信息‘
}
},
{
path: ‘/ChangeCommunity‘,
name: ‘ChangeCommunity‘,
component: ChangeCommunity,
meta: {
title: ‘我的社区‘
}
},
]
})
vueRouter.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title;
}
next();
})
export default vueRouter
当从我的信息页面跳转到我的社区页面时，对应的title值也会由“我的信息”变成“我的社区”。
二路由懒加载
当项目页面比较多时，初始化时候加载所有页面路由，性能十分差，这时候就可用懒加载，要渲染那个页面就加载那个页面。
例如:
{
path: ‘/ChangeCommunity‘,
name: ‘ChangeCommunity‘,
component: ChangeCommunity,
resolve
},
还可以
{
path: ‘/ChangeCommunity‘,
name: ‘ChangeCommunity‘,
component: resolve=>require([‘ChangeCommunity‘],resolve)
},
两种写法都可以。
三 滚动行为
使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。
vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。
注意：这个功能只在支持 history.pushState 的浏览器中可用。
例如:
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition//滚动到指定位置
} else {
return { x: 0, y: 0 }
}
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
}
}
异步滚动
scrollBehavior (to, from, savedPosition) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ x: 0, y: 0 })
}, 500)
})
}
