添加与修改操作：vue-路由导航

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

本文简单介绍一下关于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"