el-drawer中使用<router-view/>

在Element UI的`el-drawer`组件中，如果你想要动态地加载和显示由Vue Router管理的不同视图（view），可以将`<router-view>`标签直接放入`el-drawer`内。这样，当你切换路由时，对应的组件会被渲染并在`el-drawer`里显示。

<template>
  <div>
    <el-button @click="toggleDrawer">打开抽屉</el-button>
    <el-drawer
      :visible.sync="drawerVisible"
      width="30%"
      :direction="direction"
    >
      <router-view></router-view>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: false,
      direction: 'right',
    };
  },
  methods: {
    toggleDrawer() {
      this.drawerVisible = !this.drawerVisible;
    }
  },
  mounted() {
    // 如果需要在特定条件下打开初始路由，可以在mounted钩子里设置
    if (initialRoute) {
      this.$router.push(initialRoute);
      this.toggleDrawer();
    }
  },
};
</script>

当你点击“打开抽屉”按钮，如果已经设置了默认的初始路由（如`initialRoute`变量），`<router-view>`将显示对应路由的内容。