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

效果展现