由于之前都是直接解析后台传入的页面,所以在想如果没有在菜单显示的页面该如何跳转。
这种场景就是后台没有给我们页面,我们需要在页面内跳转,并且没有左边菜单,也不需要在左边菜单显示。先看效果图吧:
下面废话不多说,直接上代码:
1.在route/index.js里面,找到这个菜单对应的路由:
{
path: '/user',
component: Layout,
redirect: 'noRedirect',
name: 'system',
meta: {
title: '系统管理',
icon: 'icon: el-icon-s-help'
},
children: [
{
path: 'userlist',
component: () => import('@/views/user/index'),
name: 'user',
meta: { title: '用户管理', noCache: true }
},
{
path: 'orglist',
component: () => import('@/views/user/org'),
name: 'organization',
meta: { title: '组织管理', noCache: true }
},
//敲黑板
//敲黑板
//敲黑板
//需要跳转的页面
{
path: '/user/orgDetail/:id(\\d+)', //路径及携带参数
component: () => import('@/views/user/orgDetail'),
name: '组织详情',
//meta.activeMunu 激活时的菜单,新开的页面需要挂在那个菜单下
meta: { title: '组织详情', noCache: true, activeMenu: '/user/orglist' },
hidden: true //是否显示在菜单
},
{
path: 'rolelist',
component: () => import('@/views/user/role'),
name: 'role',
meta: { title: '角色管理', noCache: true }
}
]
},
2.在你需要打开的视图里面跳转路由设置成如下的代码:
<el-table-column label="组织架构" min-width="150px">
<template slot-scope="{row}">
<!-- 使用router-link 加上你需要新开页面的路由地址和参数 -->
<router-link :to="'/user/orgDetail/'+row.id">
<span class="link-type">{{ row.domain }}</span>
</router-link>
</template>
</el-table-column>
以上2步操作完成后就可以看到效果了: