Question

我已经这样做了：

  <main>
      <!-- router outlet -->
      <router-view
        class="view"
        keep-alive
        transition
        transition-mode="out-in">
      </router-view>
  </main>

在我的控制台中，我收到错误：

main.js:5944 [Vue warn]: Attributes "class", "transition" are ignored on component <router-view> because the component is a fragment instance: http://vuejs.org/guide/components.html#Fragment-Instancewarn @ main.js:5944
main.js:5944 [Vue warn]: Transitions will not work on a fragment instance. Template: 
<banner :title="title"></banner>
<div class="login-view">
  <div class="Login-alert" v-show="authError" transition="fade">
    Foutieve combinatie email / wachtwoord
  </div>
  <form class="Login-form" @submit.prevent="login">
    <input type="email" name="email" class="Login-form__input" v-model="creds.email" placeholder="Email" required="">
    <input type="password" name="password" class="Login-form__input" v-model="creds.password" placeholder="Wachtwoord" required="">
    <button type="submit" class="Button Login-form__button">
      Login
    </button>
  </form>
</div>
warn @ main.js:5944

这里有什么问题？

Answer 1

这是一个特定的行为，记录为＃4：https://vuejs.org/guide/components.html#Fragment-Instance

不确定其背后的确切推理，但可能与大多数情况下整个事情都会被换掉的事实有关（在v2中的所有情况）。简单的修正是有一个外部div来保存你的路由器视图

修改

尝试使用此代替当前版本，以确保它甚至与您粘贴的代码有关，或者是否将视图路由到...

<main> <div>Howdy</div> </main>

如果有效，显然应该是，你的视图正在加载什么？

<强> EDIT2：

哦，我想我现在从控制台输出位看到，你的视图本身必须只有一个父元素。所以你需要做两件事，路由器视图之前的div包装器和实际视图中的div包装器。可以这样想，模板标签内的东西基本上是复制并粘贴在路由器视图标签的顶部（并完全删除）。当发生这种情况时，组件中应该只有一个父元素。很久以前扔给我的部分是模板标签在这方面不是一个元素。

Vue.js组件是一个片段实例

1 个答案: