Element UI 页面跳转的几种风格

一 通过导航的路由跳转

1 代码

通常由框架生成，不同的开源框架写法不一样。

2 效果

3 适用场景

被跳转的页面是某个功能模块的主页面，一般通过导航菜单跳过去。

二 页面间主动跳转

1 代码

a 跳转代码

<el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
  <template v-slot="scope">
    <router-link :to="'/dict/type/data/' + scope.row.id" class="link-type">
      <span>{{ scope.row.type }}</span>
    </router-link>
  </template>
</el-table-column>

b 路由代码要做相关配置

{
  path: '/dict',
  component: Layout,
  hidden: true,
  children: [{
      path: 'type/data/:dictId(\\d+)',
      component: (resolve) => require(['@/views/system/dict/data'], resolve),
      name: 'Data',
      meta: {title: '字典数据', icon: '', activeMenu: '/system/dict'}
    }
  ]
}

c 跳转后页面代码位置

子页面和父页面在同一目录层次。

2 效果

a 调转前页面

b 调整后页面

c 适用场景

子页面用到了父页面的数据，并且子页面逻辑较为复杂，可单独开一个页面。

三 通过 Tab 跳转

1 代码

2 效果

3 优化点

不同的步骤如果筛选条件不一样，可将筛选条件移到步骤内，不同的 Tab 页采用不同的筛选条件。

4 适用场景

各页面内容高度相似，可将相同部分抽出放在最上方，不同部分单独展示。

5 缺点

数据分分合合，很容易导致逻辑混乱。

四 通过对话框跳转

1 代码

通过 open 来控制对话框是否显示。

严格意义上讲，这是弹出一个对话框，不是页面的跳转。

但如果做得好，看上去也像页面跳转一样，比方说将右上角的 close 隐藏掉。

2 效果

3 适用场景

子页面继承父页面的数据，一般用于修改、删除等简单的增、删、改场景。

五 通过抽屉跳转

1 展示效果

a 点击“布局设置”

b 右侧弹出抽屉

3 优缺点

不太符合人的使用习惯，需要用到一些不太常用的技术，但显得网站比较酷炫，适用于 C 端用户，不太适用于 B 端用户。

4 使用场景

一般用于一些系统设置，不适合频繁使用。