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-transitionandtransition-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 警告]：无法解析指令：transition（在组件中找到：） 控制台错误

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

有任何想法吗？

4

1 回答 1

1

过渡是一个属性，而不是一个指令。否v-：

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