vue-admin-template添加asyncRoutes
时间: 2023-08-07 14:08:42 浏览: 107
要在vue-admin-template中添加asyncRoutes,你需要按照以下步骤进行操作:
1. 打开src/router/index.js文件,找到asyncRoutes的定义位置。通常,它会在文件的顶部或底部的路由配置部分。
2. 在asyncRoutes数组中添加你想要的路由。每个路由都是一个对象,包含path、component、meta等属性。你可以根据你的需求进行修改。例如,你可以添加一个网站管理的路由:
```javascript
{
path: '/webManage',
component: Layout,
meta: { roles: \['admin'\] },
children: \[
{
path: 'index',
name: '网站管理',
component: () => import('@/views/webManage/index'),
meta: { title: '网站管理', icon: 'cog-fill' }
}
\]
}
```
3. 确保在asyncRoutes数组中的最后一个路由是404页面的重定向路由。这个路由的配置应该是:
```javascript
{
path: '*',
redirect: '/404',
hidden: true
}
```
这个路由的作用是当用户访问不存在的页面时,自动重定向到404页面。
4. 保存文件并重新编译运行你的项目。
请注意,如果你将404页面的重定向路由放在constantRoutes数组中,刷新页面时会出现404错误。因此,确保将它放在asyncRoutes数组中。
#### 引用[.reference_title]
- *1* *2* *3* [【Vue】VUE模板vue-admin-template添加角色权限路由](https://blog.csdn.net/See_Star/article/details/125482707)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
阅读全文