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

容器布局

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

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

    
                                      Header                                      
<!--   
      
        Go to Home                Go to about              
    
   -->// import HelloWorld from './components/HelloWorld.vue'import Menu from './components/Menu.vue'export default {  name: 'App',  components: {    // HelloWorld    Menu  }}

登录后复制

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

路由定义

在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 复制过来。

            
Default colors
                                                                          Navigator One                                                                                                                              Navigator Two                                                          Navigator Three                                                          Navigator Four                    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")    },  }}

登录后复制

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

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

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

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

运行效果如下

以上就是vue3容器布局和导航路由如何实现的详细内容，更多请关注【创想鸟】其它相关文章！