1,导航守卫
通过跳转或取消的方式来守卫导航
(1)全局守卫 - router.beforeEach()
const router = new VueRouter({ ... })
router.beforeEach((to, from, nect) => {
// ...
})
其中,to/from 表示即将 进入/离开的路由对象
next()必须被调用,否则钩子不会被 resolved
next():进行管道中的下一个钩子。如果钩子全部执行完成,则导航的状态就是 confirmed(确认的)
next(false):终端当前导航
next(‘/’):跳转到不同的地址
注:参数或查询的改变,并不会触发 进入/离开的导航守卫,使用 router.beforeRouteUpdate的组件内守卫
(2)全局后置钩子
router.afterEach((to, from) => {
// ...
})
(3)路由独享的守卫
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
(4)组件内的守卫
const foo = {
template: '...',
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 this
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 当路由改变,但是该组件被复用时调用
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对用路由是调用
// 可以访问组件实例this
}
}
2,过渡动画
以下情况,可以给任何元素和组件添加 进入/离开过渡
- 条件渲染(v-if)
- 条件展示(v-show)
- 动态节点
- 组件根节点
栗子
<div id='demo'>
<button v-on:click='show = !show'>
Toggle
</button>
<transition name='fade'>
<p v-if='show'>hello</p>
</transition>
</div>
new Vue({
el: '#demo',
data: {
show: true
}
})
.fade-enter-active,.fade-leave-active {
transition: opacity .5s
}
.fade-enter,.fade-leave-to {
opacity: 0
}