Vue3项目-配置路由及侧边栏导航栏

文件名和类名只为举例 没有语义化

1.在views 文件夹中创建文件夹 并在其中一个文件夹中创建一个vue文件  因为没有配置TS因此script 后面没有跟lang="ts"  例如 下图所示  

 

 2.在router文件夹下面index文件中  routes数组添加重定向  其中某对象中添加 children 属性 配置 二级路由 并关联上想要链接的页面  component 后面跟懒加载页面

 3.改造views 主文件HomeView 如下图

 

 -----------------------此时 通过手动输出地址就可以跳转地址 显示出路由出口的内容----------------------

 ----------------------------------下面配置导航栏 侧边栏 点击跳转显示路由出口------------------------------------------

配置侧边栏 导航栏  注：也可以在此页面添加头部组件   Element-puls 侧边栏链接

使用element-puls 组件库中 的侧栏组件   顶栏组件（导航栏）

下载组件  第一个为组件插件   第二个为组件插件的图标库

npm install element-plus --save

npm install @element-plus/icons-vue

 

 

举例 如下图

首先要提取头部组件到公共文件夹中 方便后期维护 然后引入到HomeView文件中  因为我写的vue3是以js为主的  因此  要删除掉类型注解

修改之后

 

 接下来在HomeView引入上一步配置的导航栏组件  和引入侧边栏组件  并删除掉类型注解

 并把标题注释掉  span 改为24占满盒子宽度

 

 

 

 

 

 修改之后

 因为没有设置宽度  此时侧边栏宽度是占满屏幕宽度的  因此 我们要给盒子设置一个宽度 用以限制   

main.js文件： 引入组件的Element Plus组件的样式 

 最后 在控制台  使用npm run serve 启动项目 显示的页面如下