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

本篇文章给大家分享《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
        
      
    
  

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

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

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

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

运行效果如下

今天关于《vue3容器布局和导航路由如何实现》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于Vue3的内容请关注golang学习网公众号！