vue-element-admin 页面内点详情跳转

之前都是点击按钮以弹窗的形式展示信息，现在有个需求是点了页面内的详情按钮后进行路由跳转，跳到一个新的页面上去。

1.先添加路由

route.index.js:

{
  path: '/test',
  component: Layout,
  redirect: '/test/',
  name: 'test',
  alwaysShow : true,
  meta: { title: '测试', icon: 'table' },
  children: [
    {
      path: 'task',
      name: 'task',
      component: () => import('@/views/test/a'),
      meta: { title: '自助升级', icon: 'elephant' }
    },
    { //需要跳转的页面，
      path: 'detail',
      component: () => import('@/views/test/b'),
      name: 'information',
      meta: { title: '任务详情', noCache: true, activeMenu: '@/views/test/a'},
      hidden: true   //是否显示在菜单
    }
}

这里的a与b指在view/test/目录下创建的a.vue和b.vue（a.vue是有按钮详情的页面，b.vue是要跳转过去的详情页）

2.在a.vue中

<el-table-column label="详情" align="center" width="150" class-name="small-padding fixed-width">
<template slot-scope="{row}">
   <el-button type="success" size="mini" @click="showDetail(row)">详情</el-button>
</template>
</el-table-column>

showDetail(row) {
  console.log(row)
  this.$router.push({ name:'information', query: { id: row.id }})
}

这里name要和路由里设置需要跳转的一样。也可以直接用path指定。

3.自己写需要展示的b.vue