vue-element-adminページ内点詳細ジャンプ
1420 ワード
以前はボタンをクリックしてポップアップ形式で情報を表示していましたが、ページ内の詳細ボタンをクリックしてルーティングジャンプを行い、新しいページにジャンプする必要があります.
1.ルーティングの追加
route.index.js:
ここでのaとbはview/test/ディレクトリの下で作成されたa.vueとb.vue(a.vueはボタンの詳細があるページ、b.vueはジャンプする詳細ページ)を指す.
2.a.vueで
ここでnameはルーティングにジャンプを設定するのと同じです.直接pathで指定することもできます.
3.展示が必要なb.vueを自分で書く
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を自分で書く