2

vue-router を使用している vue アプリがあります。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
let router = new VueRouter()

// Components
import App from './App.vue'

import Mapper from './components/Mapper/mapper.vue'
import ToDos from './components/Todos/ToDoApp.vue'
import Punchlist from './components/Punchlist/punchlist.vue'

// Transitions
Vue.transition('slide',{
    enterClass: 'slideInRight',
    leaveClass: 'slideOutRight'
})


// Redirects
router.redirect({
    '*': 'punchlist'
})

// Mappings
router.map({
    '/mapper': {
        component: Mapper
    },
    '/todos': {
        component: ToDos
    },
    '/punchlist': {
        component: Punchlist
    }
})

router.start(App, '#app')

slideルート間を移動するときに使用したい特定のトランジションが登録されています。私のAppコンポーネントでは、にディレクティブv-transitionとtransition-modeディレクティブを追加しましたroute-view:

<template>
    <div class="container">
    <h1>Component Gallery</h1>
      <p>
        <a class='btn btn-primary' v-link="{ path: '/punchlist' }">Punchlist</a>
        <a class='btn btn-primary' v-link="{ path: '/todos' }">Todos</a>
        <a class='btn btn-primary' v-link="{ path: '/mapper' }">Mapper</a>
      </p>
      <router-view v-transition="slide" transition-mode="out-in" :google-maps-api-key="googleMapsApiKey"></router-view>
  </div>
</template>

実行しようとすると、コンソール エラーが発生します。

[Vue warn]: ディレクティブの解決に失敗しました: transition (コンポーネントに見つかりました: ) コンソールエラー

ドキュメントを読んで例を見てきましたが、バインディングを解決しようとしたときにエラーが発生する理由がわかりません。

何か案は？

4

1 に答える 1

1

Transition は属性であり、ディレクティブではありません。いいえv-:

<router-view transition="slide">
于 2016-05-26T22:33:36.680 に答える