vue3动态添加路由及生成菜单,vue动态路由菜单
这篇文章主要介绍了Vue3之页面，菜单，路由的使用，文章围绕Vue3页面，菜单，路由相关资料展开详细内容，需要的朋友可以参考一下
目录
一、实现点击菜单跳转1、统一页面命名方式2、新增管理页面3、添加路由4、在菜单中绑定路由二、实际效果
一、实现点击菜单跳转
1、统一页面命名方式
我们先将页面命名统一，都用小写形式，将家、关于页面都改为小写，接着再将路由器中index.ts修改。
示例代码如下：
从" vue路由器"导入{ createRouter，createWebHistory，RouteRecordRaw }
从以下位置导入主页./views/home.vue
关于从导入./views/about.vue
const routes:ArrayRouteRecordRaw=[
{
路径："/",
姓名：家，
组件：主页
},
{
路径："/关于"，
名称："关于",
组件：关于
//路由级代码拆分
//这会生成一个单独的块（大约。[哈希]。js)用于此路线
//懒加载让我删掉了
}
]
const router=createRouter({
history:createWebHistory(进程。环境。base _ URL)，
路线
})
导出默认路由器
2、新增管理页面
在视图/管理下创建页面为admin-ebook.vue
示例代码如下：
模板
div class="关于"
氕电子书管理页面/h1
/div
/模板
3、添加路由
再次修改路由器中index.ts内容，
示例代码如下：
从" vue路由器"导入{createRouter，createWebHistory，RouteRecordRaw}
从以下位置导入主页./views/home.vue
关于从导入./views/about.vue
从导入管理员电子书./views/admin/admin-ebook.vue
const routes:ArrayRouteRecordRaw=[
{
路径："/",
姓名：家，
组件：主页
},
{
路径："/关于"，
名称："关于",
组件：关于
},
{
路径："/admin/admin-ebook "，
名称：管理员手册，
组件：管理员手册
}
]
const router=createRouter({
history:createWebHistory(进程。环境。base _ URL)，
路线
})
导出默认路由器
4、在菜单中绑定路由
我们在header中修改，示例代码如下：
模板
a-layout-header class=header
div class=logo /
菜单
主题=黑暗
模式=水平
:style={ lineHeight: 64px }
菜单项键=/
路由器-链接到=/首页/路由器链接
/a-菜单项
菜单项key=/admin/admin-ebook
路由器-链接到=/admin/admin-ebook 电子书管理页面/路由器链接
/a-菜单项
菜单项键=3
路由器-链接到=/about 关于我们/路由器链接
/a-菜单项
/a-菜单
/a-布局-标题
/模板
脚本语言
从“vue”导入{定义组件}；
导出默认定义组件({
姓名：负责人，
});
/脚本
知识点：
使用路由器链接跳转，示例如下：路由器-链接到=/首页/路由器链接
二、实际效果
重新编译启动，如下图：
到此这篇关于Vue3之页面，菜单，路由的使用的文章就介绍到这了，更多相关Vue3之页面，菜单，路由的使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。