脚本宝典收集整理的这篇文章主要介绍了Vue实战(五)子路由,及转场动画,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
项目地址: Github
往期文章:
Vue实战(一)项目分析
Vue实战--(二)路由设计及导航栏开发
Vue实战(三)项目配置
Vue实战(四)登录/注册页的实现
上次实现了登录注册功能,接下来我要实现常规活动模块,在写这个模块前,要先优化一下路由
实现了登录功能后,要修改一下路由,将用户名作为参数传进用户个人中心页面
router/index.js
{
path: '/user/:username',
name: '个人中心',
component: User,
}
在导航栏里,我用编程式路由实现路由跳转
<mu-bottom-nav-item value="个人中心" title="用户" @click.native="go" icon="perm_identity"></mu-bottom-nav-item>
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()
}
})
这里用了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’的时候默认展示该路由
路由转场动画的设置其实很简单,官方文档里写的很清楚了
过渡动效
<keep-alive>
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</keep-alive>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
我这里动画会导致页面重绘,所以给动画加上过渡模式 mode="out-in"
过渡模式
以上是脚本宝典为你收集整理的Vue实战(五)子路由,及转场动画全部内容,希望文章能够帮你解决Vue实战(五)子路由,及转场动画所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。