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

效果展現