Переход на страницу Vue с помощью Vue-Router - PullRequest
Новая
       9

Переход на страницу Vue с помощью Vue-Router

0 голосов
/ 17 мая 2018

Я пытаюсь сделать хороший переход страниц с помощью Vue и Vue-Router.

Я загружаю разные страницы (компоненты) прямо в router-view , у них хорошая анимация.

У меня уже есть отличная анимация для всех моих страниц, однако мне нужно выяснить, как просто изменить переход на основе нажатой ссылки на маршрутизатор.

Если класс route-link является особенным, выполните другую анимацию.

App.vue 

<template>
  <div id="app">
    <nav>
      <router-link to="/1">Page 1</router-link>
      <router-link to="/2">Page 2</router-link>
      <router-link to="/3">Page 3</router-link>
      <router-link class="special" to="/4">Page 4</router-link>
    </nav>
    <transition @enter="enter" @leave="leave">
      <router-view/>
    </transition>
  </div>
</template>

<script>
  export default {
    ...
    methods: {
      enter(el, done) {
        // main page animation with a timeline using Greensock
      },
      leave(el, done) { 
        // main page animation with a timeline using Greensock
      }
    },
  }
</script>

Как мне заставить это работать?

Если пользователь нажимает на ссылку маршрутизатора с классом special, измените 

<transition @enter="enter" @leave="leave">
  <router-view/>
</transition>

на: 

<transition @enter="enterSpecial" @leave="leaveSpecial">
  <router-view/>
</transition>

, чтобы я мог добавить 

    methods: {
      enter(el, done) {
        // main page animation with a timeline using Greensock
      },
      leave(el, done) { 
        // main page animation with a timeline using Greensock
      }
    },

Я искал в документах + гуглил и не нашел ничего, что могло бы помочь.

1 Ответ

0 голосов
/ 18 мая 2018

Вы можете использовать метаполя маршрутизатора, чтобы знать, какую анимацию вы должны применить.При объявлении маршрутов вы можете добавить мета-поля для каждого маршрута.Например: 

const router = new VueRouter({
  routes: [
    {
      path: '/default',
      component: SomeComponent
    },
    {
      path: '/special',
      component: SomeComponent2,
      // meta fields
      meta: { 
          animation: 'special'
      }
    }
  ]
})

Затем на ваших компонентах вы можете сделать это: 

 methods: {
   enter(el, done) {
     if (this.$route.meta.animation === 'special') {
         // apply special animation
     } else {
        // main page animation with a timeline using Greensock
     }
   },
   leave(el, done) { 
     // main page animation with a timeline using Greensock
   }
 }

Более подробную информацию о мета-полях vue-router можно найти здесь .

...