Css Vue材料抽屉（如何在md内容中显示file.Vue）

因此，我试图构建一个包含4个文件的网站。vue（navigation.vue、Home.vue、something1.vue something2.vue）每个文件都有自己的模板和样式。在navigation.vue内部，我有一个临时抽屉，以便在每个vue文件上导航
（临时抽屉的文档：（我使用的是Vue材料）我使用了相同的代码）

在我的抽屉里，我有md工具栏、md抽屉和md内容标签（在其中创建我的导航菜单：

---

因此，我想知道他们是否可以将我的一个模板（通过单击md抽屉中的项目列表）加载到md内容标签中？

您可以使用vue router。要安装vue router，请转到根目录并在终端中键入以下内容：

npm安装vue路由器

App.vue的示例代码段或要呈现.vue文件的位置：

<template>
<v-app>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</v-app>
</template>

您必须将每个md选项放在vue路由器链接中，如下所示：

    <md-drawer :md-active.sync="showNavigation">
      <md-toolbar class="md-transparent" md-elevation="0">
        <span class="md-title">My App name</span>
      </md-toolbar>

      <md-list>
        <md-list-item>
          <!-- use router-link component for navigation. -->
          <!-- specify the link by passing the `to` prop. -->
          <!-- replace "/foo" and "/bar" with your route path (e.g., "/home", "/something1", "/something2") -->
          <router-link to="/foo">
            <md-icon>move_to_inbox</md-icon>
            <span class="md-list-item-text">Inbox</span>
          </router-link>
        </md-list-item>

        <md-list-item>
          <router-link to="/bar">
            <md-icon>send</md-icon>
            <span class="md-list-item-text">Sent Mail</span>
          </router-link>
        </md-list-item>

        <md-list-item>
          <router-link to="/foo">
            <md-icon>delete</md-icon>
            <span class="md-list-item-text">Trash</span>
          </router-link>
        </md-list-item>

        <md-list-item>
          <router-link to="/bar">
            <md-icon>error</md-icon>
            <span class="md-list-item-text">Spam</span>
          </router-link>
          </md-list-item>
      </md-list>
    </md-drawer>

我的应用程序名称
将\移动到\收件箱
收件箱
发送
发送邮件
删除
废物箱
错误
垃圾邮件

您可以在此处了解有关vue路由器的更多信息：：

---

如果我的答案对您有帮助，请随时投票支持。希望这有帮助！：）

尝试使用vue Router您可以给我一个例子或文档请给官方文档一个可以帮助您的例子

    <md-drawer :md-active.sync="showNavigation">
      <md-toolbar class="md-transparent" md-elevation="0">
        <span class="md-title">My App name</span>
      </md-toolbar>

      <md-list>
        <md-list-item>
          <!-- use router-link component for navigation. -->
          <!-- specify the link by passing the `to` prop. -->
          <!-- replace "/foo" and "/bar" with your route path (e.g., "/home", "/something1", "/something2") -->
          <router-link to="/foo">
            <md-icon>move_to_inbox</md-icon>
            <span class="md-list-item-text">Inbox</span>
          </router-link>
        </md-list-item>

        <md-list-item>
          <router-link to="/bar">
            <md-icon>send</md-icon>
            <span class="md-list-item-text">Sent Mail</span>
          </router-link>
        </md-list-item>

        <md-list-item>
          <router-link to="/foo">
            <md-icon>delete</md-icon>
            <span class="md-list-item-text">Trash</span>
          </router-link>
        </md-list-item>

        <md-list-item>
          <router-link to="/bar">
            <md-icon>error</md-icon>
            <span class="md-list-item-text">Spam</span>
          </router-link>
          </md-list-item>
      </md-list>
    </md-drawer>