vue 组件路由,
这篇文章主要为大家介绍了vue3容器布局和导航路由实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
目录
容器布局路由定义左侧菜单结语：
容器布局
将App.vue中的编译相关内容注释或删除掉，然后将元素加提供的布局复制过来放在App.vue中
该布局为左侧菜单栏，右边内容区，右上为顶部，典型的管理后台风格
模板
！- img alt=Vue logo src= ./assets/logo.png -
div class=公共布局
埃尔容器
左侧宽度= 200像素
菜单/菜单
/El-旁白
埃尔容器
El-header高度= 20px header/El-header
埃尔梅因
路由器视图/路由器视图
/el-main
/El-容器
/El-容器
/div
！-
差异
p
路由器链接到=/home 转到主页/路由器链接
路由器-链接到=/about 转到关于/路由器-链接
路由器视图/路由器视图
/p
/div
HelloWorld消息=欢迎使用您的vue . j应用/-
/模板
脚本
//从导入你好世界./components/HelloWorld.vue
从导入菜单.组件/菜单. vue
导出默认值{
名称："应用程序",
组件：{
//HelloWorld
菜单
}
}
/脚本
上述代码中有Menu.vue组件，需要新建，稍后再添加内容
路由定义
在科学研究委员会目录新建routes.js文件，将路由列表写入，方便其它组件使用
常量路由=[
{路径："/home "，名称：“家”，标签:"首页，组件：()=导入(。/components/home.vue )，}，
{路径："/关于",名称："关于",标签:"关于，组件：()=导入(。/components/about.vue )，}，
]
导出默认路由
内容没有什么变化，就是将router.js中的路线抽出来，单独写一个文件
router.js引入并使用路线
从" vue路由器"导入{ createRouter，createWebHashHistory }
从导入路线。/路线
const router=createRouter({
history: createWebHashHistory()，
路线：路线，
})
导出默认路由器
左侧菜单
在成分目录中新建Menu.vue页面，然后将元素加中菜单组件中侧砂坝复制过来。
模板
el-row class=tac
el-col :span=24
h5 class=mb-2 默认颜色/h5
El-menu default-active= 2 class= El-menu-vertical-demo @ open= handle open @ close= handle close
埃尔-子菜单索引=1
模板#标题
埃尔图标
位置/
/el-icon
spanNavigator One/span
/模板
路线中的router-link v-for=(item，index) to= { name:item。name } :key= item。名称
埃尔-菜单项：index=index
span v-text=item.label/span
/El-菜单项
/路由器链接
/El-子菜单
埃尔菜单项索引=2
埃尔图标
图标菜单/
/el-icon
跨度导航器2/span
/El-菜单项
埃尔菜单项索引=3 已禁用
埃尔图标
文件/
/el-icon
跨度导航器三/span
/El-菜单项
埃尔菜单项索引=4
埃尔图标
设置/
/el-icon
跨度导航器四个/span
/El-菜单项
/el-menu
/el-col
/el-row
/模板
脚本
导入{
文档，
菜单作为图标菜单，
位置，
设置，
}来自@element-plus/icons-vue
导入路线自./路线
导出默认值{
名称：菜单，
组件：{文档，图标菜单，位置，设置},
data() {
返回{
路线：路线，
}
},
方法：{
handleOpen() {
console.log(111 )
},
handleClose() {
console.log(222 )
},
}
}
/脚本
@element-plus/icons-vue此包需要安装(NPM安装@ element-plus/icons-vue)
元素加官网中的例子都是分时（同timesharing）设置语法写的，这里我们改成射流研究…响应式语法
请将列宽更改为：span=24 或更大。如果列宽过小，就会在字体中间发现灰线。
引入的路由表routes.js将内容传递给router-link。
运行效果如下
结语：
后续的路线可以直接添加到routes.js中，左边的简单菜单和右边的内容区就实现了。以上是vue3容器布局和导航路线的实现示例的细节。更多关于vue3集装箱布局和导航路线的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。