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()
  }
})

• 给需要登陆才能访问的页面加上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’的时候默认展示该路由

路由转场动画

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

      <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"
过渡模式

效果展示