vue-element-admin 框架 页面内跳转非左侧菜单,展示标签导航viewTag

由于之前都是直接解析后台传入的页面,所以在想如果没有在菜单显示的页面该如何跳转。

 这种场景就是后台没有给我们页面,我们需要在页面内跳转,并且没有左边菜单,也不需要在左边菜单显示。先看效果图吧:

 

 下面废话不多说,直接上代码:

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步操作完成后就可以看到效果了:

猜你喜欢

转载自blog.csdn.net/lchmyhua88/article/details/121384136