Vue Material Drawer：如何在md-content中加载.vue文件

当然可以实现！这是Vue单页应用里非常典型的路由场景，结合Vue Router就能完美满足你的需求。下面是一步步的具体实现方案：

1. 安装Vue Router（如果尚未安装） #

如果你还没引入Vue Router，先通过包管理器安装：

# Vue 3 版本
npm install vue-router@4
# Vue 2 版本
npm install vue-router@3

2. 配置路由规则 #

在项目根目录创建router/index.js文件，用来定义路由与组件的映射关系：

import { createRouter, createWebHashHistory } from 'vue-router' // Vue3 写法
// Vue2 写法：import VueRouter from 'vue-router'
import Home from '../components/Home.vue'
import Something1 from '../components/something1.vue'
import Something2 from '../components/something2.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/something1', component: Something1 },
  { path: '/something2', component: Something2 }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})
// Vue2 写法：const router = new VueRouter({ routes, mode: 'hash' })

export default router

3. 改造navigation.vue组件 #

接下来调整你的导航抽屉，把列表项换成路由链接，并将内容区域设为路由渲染出口：

<template>
  <div>
    <md-toolbar>
      <md-button class="md-icon-button" @click="toggleDrawer">
        <md-icon>menu</md-icon>
      </md-button>
      <span class="md-title">我的网站</span>
    </md-toolbar>

    <md-drawer :md-active.sync="drawerActive" md-swipeable>
      <md-list>
        <!-- 用router-link替换普通列表项，点击触发路由跳转 -->
        <md-list-item>
          <router-link to="/" class="router-link">首页</router-link>
        </md-list-item>
        <md-list-item>
          <router-link to="/something1" class="router-link">Something 1</router-link>
        </md-list-item>
        <md-list-item>
          <router-link to="/something2" class="router-link">Something 2</router-link>
        </md-list-item>
      </md-list>
    </md-drawer>

    <md-content>
      <!-- 路由视图：对应组件会自动渲染到这里 -->
      <router-view></router-view>
    </md-content>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawerActive: false
    }
  },
  methods: {
    toggleDrawer() {
      this.drawerActive = !this.drawerActive
    }
  }
}
</script>

<style scoped>
/* 去掉router-link默认下划线，适配Material列表项样式 */
.router-link {
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
  padding: 16px;
}
/* 可选：给当前激活的路由链接添加高亮效果 */
.router-link-active {
  background-color: rgba(0,0,0,0.1);
}
</style>

4. 在主入口挂载路由 #

最后，在main.js中引入并挂载路由实例：

import { createApp } from 'vue' // Vue3 写法
import App from './App.vue'
import router from './router'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'

const app = createApp(App)
app.use(VueMaterial)
app.use(router) // 挂载路由
app.mount('#app')

// Vue2 写法：
// import Vue from 'vue'
// import App from './App.vue'
// import router from './router'
// import VueMaterial from 'vue-material'
// import 'vue-material/dist/vue-material.min.css'

// Vue.use(VueMaterial)
// Vue.use(router)

// new Vue({
//   router,
//   render: h => h(App)
// }).$mount('#app')

这样配置完成后，点击抽屉里的列表项，对应的.vue组件就会自动加载到md-content区域的router-view位置了！如果需要嵌套路由、路由守卫等进阶功能，可以根据实际需求扩展路由配置。

内容的提问来源于stack exchange，提问作者Jacob C.