vue-element-adminページ内点詳細ジャンプ

1420 ワード

以前はボタンをクリックしてポップアップ形式で情報を表示していましたが、ページ内の詳細ボタンをクリックしてルーティングジャンプを行い、新しいページにジャンプする必要があります.
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で


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

ここでnameはルーティングにジャンプを設定するのと同じです.直接pathで指定することもできます.
3.展示が必要なb.vueを自分で書く