使用vue--element-admin 做管理系统,现在要新建节目,想要实现的是新打开一个路由的嵌套页面,可以试着告诉我怎么做么
时间: 2024-04-08 20:32:58 浏览: 23
当你想要在Vue-Element-Admin中实现路由嵌套页面,可以按照以下步骤进行操作:
1. 首先,在`src/router/index`文件中,找到你要嵌套的由所在的父级由配置。假设你要在`/`路径下添加一个新的嵌套页面可以在对应的父级路由配置添加一个子路由:
```javascript
{
path: '/program',
component: Layout,
redirect: '/program/list', 设置默认子路由
meta: title: '节目', icon: 'el-icon-guide' },
children: [
{
path: 'list',
name: 'ProgramList',
component: () => import('@/views/program/list'),
meta: { title:节目列表', icon: 'el-icon-menu' }
},
// 添加新的子路由
{
path: 'new',
name: 'NewProgram',
component: () => import('@/views/program/new'),
meta: { title: '新建节目', icon: 'el-icon-plus' }
}
]
},
```
2. 接下来,在`src/views`目录下创建一个新的文件夹,命名为`program`(与上一步中的子路由配置对应)。在该文件夹下创建一个新的Vue组件,命名为`new.vue`(与上一步中的子路由配置对应)。
3. 在`new.vue`组件中,你可以实现你想要的新建节目页面的布局和功能。根据需要引入Element-UI组件,并在模板中使用它们。
4. 最后,你可以在其他页面中添加链接或按钮,以跳转到新建节目页面。例如,在`src/views/program/list.vue`组件中,你可以添加一个按钮来跳转到新建节目页面:
```html
<el-button type="primary" @click="handleNewProgram">新建节目</el-button>
```
```javascript
methods: {
handleNewProgram() {
this.$router.push({ name: 'NewProgram' });
}
}
```
这样,当你点击按钮时,就会跳转到新建节目页面。
以上是在Vue-Element-Admin中实现路由嵌套页面的基本步骤。你可以根据自己的需求进行进一步的定制和扩展。希望对你有所帮助!如果有任何其他问题,请随时提问。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)