Question

在我的应用中，没有为App.vue元素分配任何#app组件。相反，在我的index.html中，我有一个<router-view>元素，默认显示一些Home.vue组件或其他取决于路由的其他组件。

但是，无论当前路线如何，我都想一直显示某个组件（通知用户在线状态）。但是，如果无法从index.html调用组件，该如何实现呢？还是有可能？

index.html：

<!DOCTYPE html>
<html lang="en">
  <head><meta charset="utf-8"></head>
  <body>
    <div id="app">
      <!-- Component handling user status (connected / not connected) would go here -->
      <router-view></router-view>
    </div>
    <script src="dist/build.js"></script>
  </body>
</html>

Answer 1

将组件放置在<router-view>上方（注释表示）：

<div id="app">
  <user-presence-status></user-presence-status>
  <router-view></router-view>
</div>

在安装根组件时，请确保包括组件定义，如以下示例所示：

import UserPresenceStatus from '@/components/UserPresenceStatus';

new Vue({
  el: '#app',
  compnents: {
    UserPresenceStatus
  }
);

demo

在Vue.js中从index.html调用组件

1 个答案: