vue路由跳转动画_Vue实战(五)子路由，及转场动画

个人中心带参数访问

实现了登录功能后，要修改一下路由，将用户名作为参数传进用户个人中心页面

router/index.js

{

path: '/user/:username',

name: '个人中心',

component: User,

}

在导航栏里，我用编程式路由实现路由跳转

methods: {

go () {

this.$router.push({name: '个人中心', params: {username: this.$store.state.user || 'vip'}})

}

}

在go方法中，|| 是为了在没登录时点击个人中心不会报错

路由拦截

有些页面需要登陆才能开放，这时候需要用上路由拦截

{

path: '/user/:username',

name: '个人中心',

component: User,

meta: {

requireAuth: true

}

}

router.beforeEach((to, from, next) => {

const user = store.state.user

if (to.meta.requireAuth) { // 判断该路由是否需要登录权限

if (user) { // 通过vuex state获取当前的用户名是否存在

next()

} else {

next({

path: '/login',

query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由

})

}

} else {

next()

}

})

给需要登陆才能访问的页面加上meta信息

router.beforeEach添加路由拦截

这里用了query: {redirect: to.fullPath}所以我们登录的代码页应该加一下跳转方式

Login.vue/axios(login)

// 路由跳转

this.$router.push(this.$route.query.redirect || {name: '首页'})

在登录的axios方法中加上路由跳转方法，如果存在redirect，则登录后跳往redirect的路由(比如点击个人中心后被路由拦截到了登录页，登录后即跳回个人中心)，如果没有就跳往首页(直接点击登录页登录)

活动页子路由设计

{

path: '/regular',

component: Regular,

children: [

{path: 'new', name: '发起活动', component: RegularNew},

{path: '', name: '常规活动', component: RegularNow},

{path: 'info', name: '活动信息', component: RegularInfo},

{path: 'old', name: '往期活动', component: RegularOld}

]

}

第二个子路由的路径为""表示当用户加入‘/regular’的时候默认展示该路由

路由转场动画

路由转场动画的设置其实很简单，官方文档里写的很清楚了

过渡动效

.fade-enter-active, .fade-leave-active {

transition: opacity .5s;

}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {

opacity: 0;

}

我这里动画会导致页面重绘，所以给动画加上过渡模式 mode="out-in"

过渡模式

效果展示