1、路由里添加一个动态路由,位置随意
/src/router/index/js
{
path: 'tabs/:name/:id', // 跳转的路由
component: () => import('@/views/contacts/tabs'), // 对应的页面
name: ':name', // tab名称
hidden: true // 控制是否在侧边栏显示,默认为false
}
2、给表格添加点击事件
<template>
<el-table
:data="tableData"
@row-click="rowClick" // 当某一行被点击时会触发该事件
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
id: 0,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 1,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id: 2,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 3,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
},
methods: {
rowClick(row, column) {
if (column.fixed === 'right') return // 点击右侧操作栏不触发,如果有右侧固定导航栏的话
if (row.nameC.indexOf('/') > -1) { // 如果name出现/不能添加到路由里面,不然会报错
this.$message({
showClose: true,
message: '公司名称不符合要求,公司名称不能出现"/"',
type: 'error'
})
return
}
// 添加路由
this.$store.dispatch('tagsView/addView', {
meta: {
title: row.nameC
},
name: row.nameC,
path: `/tabs/${row.name}/${row.id}`
})
// 跳转路由
this.$router.push(`/contacts/tabs/${row.nameC}/${row.id}`)
}
}
}
</script>
点击表格行就会跳转到一个新的以姓名为标题的一个tab栏里了