1.路由元信息
- 定义路由的时候可以配置 meta 字段
{
path: 'login',
name: 'login',
component: Login,
query: {}, //不保留历史记录,即不能返回到登录页面
meta: {
navbar: false,
requireAuth: false
}
}
- 利用$route.meta.xx进行调用
<my-footer v-show="$route.meta.navbar"></my-footer> //控制是否显示底部菜单
- 利用$route.matched来检查mate字段
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!auth.loggedIn()) {
next({
path: '/login';
})
} else {
next()
}
} else {
next() // 确保一定要调用 next()
}
})
2.过渡效果
<transition>
<router-view></router-view>
</transition>
Vue提供的过渡效果
3.数据获取
- 导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。
export default {
data () {
return {
loading: false,
post: null,
error: null
}
},
created () {
// 组件创建完后获取数据,
// 此时 data 已经被 observed 了
this.fetchData()
},
watch: {
// 如果路由有变化,会再次执行该方法
'$route': 'fetchData'
},
methods: {
fetchData () {
this.error = this.post = null
this.loading = true
// replace getPost with your data fetching util / API wrapper
getPost(this.$route.params.id, (err, post) => {
this.loading = false
if (err) {
this.error = err.toString()
} else {
this.post = post
}
})
}
}
}
- 导航完成之前获取:导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航。
export default {
data () {
return {
post: null,
error: null
}
},
beforeRouteEnter (to, from, next) {
getPost(to.params.id, (err, post) => {
next(vm => vm.setData(err, post))
})
},
// 路由改变前,组件就已经渲染完了
// 逻辑稍稍不同
beforeRouteUpdate (to, from, next) {
this.post = null
getPost(to.params.id, (err, post) => {
this.setData(err, post)
next()
})
},
methods: {
setData (err, post) {
if (err) {
this.error = err.toString()
} else {
this.post = post
}
}
}
}
4.路由滚动
当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置
scrollBehavior (to, from, savedPosition) {
// return 期望滚动到哪个的位置
}
to:目标路由
from:当前路由
savedPosition:popstate 导航 (通过浏览器的 前进/后退 按钮触发)
- 返回类型
{ x: number, y: number }
{ selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)
- 浏览器原生表现
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)
})
}