vue - vue-router 进阶

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
}

vue - vue-router 进阶

猜你喜欢