提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
本文简单介绍一下关于vue中的路由跳转问题,仅为个人理解,可能存在错误。
该部分的内容源自于写项目时,在创建了“添加页面”后,后续的“修改页面”仍想复用“添加页面”,因此需要设置路由导航和相关操作。
一、背景介绍
首先,我们在 views/hospSet 目录下新建了add.vue 文件,其本意是添加医院设置,具体页面展示如下图所示
在后续的开发中,我们设计了医院设置修改功能,即下图最右侧的修改按钮。我们仍然想使用之前创建的添加页面。
首先,我们没必要在导航模块单独添加修改子模块,所以我们可以设置在router/index.js文件中设置隐式路由:
{
path: 'add',
name: '医院设置添加',
component: () => import('@/views/hospSet/add'),
meta: {
title: '医院设置添加', icon: 'tree' }
},
{
path: 'edit/:id',
name: '医院设置修改',
component: () => import('@/views/hospSet/add'),
meta: {
title: '医院设置修改', icon: 'tree' },
hidden: true
}
注意,我们是针对某一条(行)信息进行内容修改,因此我们可以借助id获得当前元素,并在展示页面展示
其次,对list页面的修改按钮设置路由导航功能,具体代码如下图所示:
<router-link :to="'/hospSet/edit/'+scope.row.id">
<el-button type="primary" size="mini" icon="el-icon-