开发过程中只使用过vue-router的导航守卫做权限,路由元信息做导航激活,其他知识点没有接触过,写个笔记加深理解。
1、导航守卫
可以用 router.beforeEach
注册一个全局前置守卫,可以根据需求,根据权限拦截页面跳转,或跳转会指定页面,比如登录页面。
router.beforeEach((to, from, next) => {
// logic judgment
})
2、路由元信息
在定义路由时可以根据需求,配置meta字段,可用于tab name显示、是否keep-alive、导航菜单动态激活等。
routes: [
{
path: '/home',
component: home,
children: [
{
path: 'index',
component: Index,
// a meta field
meta: {
name:'首页',
isKeepAlive: false,
tag:'index'
}
}
]
}
]
})
3、过渡动效
路由跳转中添加过渡效果,动画效果的定义,参考 https://cn.vuejs.org/v2/guide/transitions.html
<transition name="slide">
<router-view></router-view>
</transition>
4、导航完成前获取数据
平时开发时,需要从服务端获取数据,主要在在导航完成后,在接下来的组件生命周期钩子中获取数据(例如 created mounted),也就是进入页面后,正在加载中。
vue-router提供了,在导航完成前获取数据,即导航完成前,在路由进入守卫中获取数据,在数据获取成功后执行导航。
export default {
data () {
return {
post: null,
error: null
}
},
beforeRouteEnter (to, from, next) {
getPost(param, (err, post) => {
next(vm => vm.setData(err, post))
})
}
},
methods: {
setData (err, post) {
if (err) {
this.error = err.toString()
} else {
this.post = post
}
}
}
}
5、滚动行为
使用前端路由,切换到新路由时,页面滚动停留在路由切换前页面停留的位置,这个功能可以设置页面滚动到顶部,或者保存原先的滚动的位置。
注:该功能只支持history.pushState的浏览器中可用。
const router = new VueRouter({
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
}
})
6、路由懒加载
路由懒加载,即将不同路由对应的组件分割成不同代码块,然后当路由被访问后才加载对应组件,提高页面加载效率。
const Foo = () => import('./Foo.vue')
const router = new VueRouter({
routes: [
{ path: '/foo', component: Foo }
]
})
更多信息,查看链接:https://router.vuejs.org/zh/