vue3容器布局和导航路由如何实现

容器布局

将App.vue中的HelloWorld相关内容注释或删除掉，然后将element-plus提供的布局复制过来放在App.vue中

该布局为左侧菜单栏，右边内容区，右上为顶部，典型的管理后台风格

<
template>

<
!-- <
img alt="
Vue logo"
src="
./assets/logo.png"
>
-->

<
div class="
common-layout"
>

<
el-container>

<
el-aside width="
200px"
>

<
Menu>
<
/Menu>

<
/el-aside>

<
el-container>

<
el-header height="
20px"
>
Header<
/el-header>

<
el-main>

<
router-view>
<
/router-view>

<
/el-main>

<
/el-container>

<
/el-container>

<
/div>

<
!--
<
div>

<
p>

<
router-link to="
/home"
>
Go to Home<
/router-link>



<
router-link to="
/about"
>
Go to about<
/router-link>

<
router-view>
<
/router-view>

<
/p>

<
/div>

<
HelloWorld msg="
Welcome to Your Vue.js App"
/>
-->

<
/template>

<
script>

// import HelloWorld from '
./components/HelloWorld.vue'

import Menu from '
./components/Menu.vue'

export default {
name: '
App'
,
components: {
// HelloWorld
Menu
}
}
<
/script>

上述代码中有Menu.vue组件，需要新建，稍后再添加内容

路由定义

Vue3如何实现容器布局和导航路由

在src目录新建routes.js文件，将路由列表写入，方便其它组件使用

const routes = [
{ path: "
/home"
, name: '
home'
, label: '
首页'
, component: () =>
import('
./components/home.vue'
), },
{ path: "
/about"
, name: '
about'
, label: '
关于'
, component: () =>
import('
./components/about.vue'
), },
]
export default routes

内容没有什么变化，就是将router.js 中的routes抽出来，单独写一个文件

router.js引入并使用routes

import { createRouter, createWebHashHistory } from '
vue-router'

import routes from '
./routes'

const router = createRouter({
history: createWebHashHistory(),
routes: routes,
})
export default router 左侧菜单

在components目录中新建Menu.vue页面，然后将element-plus中菜单组件中Side bar 复制过来。

<
template>

<
el-row class="
tac"
>

<
el-col :span="
24"
>

<
h6 class="
mb-2"
>
Default colors<
/h6>

<
el-menu default-active="
2"
class="
el-menu-vertical-demo"
@open="
handleOpen"
@close="
handleClose"
>

<
el-sub-menu index="
1"
>

<
template #title>

<
el-icon>

<
location />

<
/el-icon>

<
span>
Navigator One<
/span>

<
/template>

<
router-link v-for="
(item, index) in routes"
:to="
{ name: item.name }"
:key="
item.name"
>

<
el-menu-item :index="
index"
>

<
span v-text="
item.label"
>
<
/span>

<
/el-menu-item>

<
/router-link>

<
/el-sub-menu>

<
el-menu-item index="
2"
>

<
el-icon>

<
icon-menu />

<
/el-icon>

<
span>
Navigator Two<
/span>

<
/el-menu-item>

<
el-menu-item index="
3"
disabled>

<
el-icon>

<
document />

<
/el-icon>

<
span>
Navigator Three<
/span>

<
/el-menu-item>

<
el-menu-item index="
4"
>

<
el-icon>

<
setting />

<
/el-icon>

<
span>
Navigator Four<
/span>

<
/el-menu-item>

<
/el-menu>

<
/el-col>

<
/el-row>

<
/template>

<
script>

import {
Document,
Menu as IconMenu,
Location,
Setting,
} from '
@element-plus/icons-vue'

import routes from '
../routes'

export default {
name: '
Menu'
,
components: { Document, IconMenu,Location, Setting },
data() {
return {
routes: routes,
}
},
methods: {
handleOpen() {
console.log("
111"
)
},
handleClose() {
console.log("
222"
)
},
}
}
<
/script>

@element-plus/icons-vue 此包需要安装(npm install @element-plus/icons-vue)

element-plus官网中的例子都是ts+setup语法写的，这里我们改成js+响应式语法

列宽改成:span="
24"
或更大值，列宽太小会发现灰线在字体中间

引入定义的路由列表routes.js,将内容循环到 router-link中

运行效果如下



Vue.js 作为一种流行的前端框架，非常适合开发大型 Web 应用程序。Vue 3 经过重大改进，提供了一些新的功能，例如容器布局和导航路由，以帮助开发人员更方便地构建 Web 应用程序。
一、Vue 3 容器布局
使用 Vue 3 构建布局时，一种常用的技术是使用容器组件。容器组件通常是一个外部包装器，用于包含其他组件。可以使用 Vue 3 提供的