"Failed to resolve directive: transition" 当尝试使用 vue-router 的转换时

Question

我有一个 vue 应用程序，我在其中使用了 vue-router。

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]: Failed to resolve directive: transition (found in component: )

我一直在通读文档并查看示例，但我无法弄清楚为什么在尝试解析绑定时出错。

有什么想法吗？

Answer 1

Transition 是一个属性，而不是指令。否 v-:

<router-view transition="slide">

"Failed to resolve directive: transition" 当尝试使用 vue-router 的转换时

"Failed to resolve directive: transition" when trying to use a transition with vue-router

css-transitions

vue.js

vue-router