当前位置：首页 > 文章列表 > 文章 > 前端 > vue3容器布局和导航路由如何实现

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

来源：亿速云 2024-04-15 21:03:32 0浏览收藏

本篇文章给大家分享《vue3容器布局和导航路由如何实现》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

容器布局

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

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

上述代码中有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 复制过来。


          
            
              
            
          
        
        
          
            
          
          Navigator Two
        
        
          
            
          
          Navigator Three
        
        
          
            
          
          Navigator Four