vue进行路由拼图的使用案例

最新推荐文章于 2025-06-22 20:45:04 发布

菩提树下的丁春秋

最新推荐文章于 2025-06-22 20:45:04 发布

阅读量212

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/maxchenBug/article/details/89529812

本文详细介绍如何在Vue项目中利用路由进行组件的模块化管理，通过实例演示了Header、Sidebar和Detail三个组件的布局拼接，实现了页面的灵活组合与复用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue进行路由拼图的使用案例

实现思路,利用路由进行实现多个组件拼图:

Detail.vue

<template>
    <div>
      <h1>详细展示</h1>
      <div>鞍山市所所所所所所所所所所所所所所所所所所所所</div>
    </div>
</template>

<script>

</script>

Header.vue

<template>
    <div>
      <h1>标题栏</h1>
      <div>欢迎</div>
    </div>
</template>

<script>

</script>

<style scoped>

</style>

Sidebar.vue

<template>
    <div>
      <h1>边条</h1>
    </div>
</template>

<script>

</script>

<style scoped>

</style>

在router\下index.js中引入

import Vue from 'vue'
import Router from 'vue-router'
import Detail from '../components/Detail'
import MyHeader from '../components/Header'
import Sidebar from '../components/Sidebar'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      components: {
        myHeader: MyHeader,
        mySidebar: Sidebar,
        myDetail: Detail
      }
    }
  ]
})

注意事项:

app.vue

<template>
  <div id="app">
    <table width="100%">
      <tr>
        <td colspan="2" style="background-color:darkgoldenrod">
          <router-view name="myHeader"></router-view>
        </td>
      </tr>
      <tr>
        <td width="20%" style="background-color:thistle">
          <router-view name="mySidebar"></router-view>
        </td>
        <td width="80%" style="background-color:aquamarine">
          <router-view name="myDetail"></router-view>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>