Vue+ElementUi实现点击表格链接页面跳转和路由效果
作者：記億揺晃着的那天
这篇文章主要介绍了Vue+ElementUi实现点击表格中链接进行页面跳转和路由,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
1、页面跳转，先看效果
点击表格中的asin会跳转到亚马逊购物界面
怎么做的呢，直接上代码
<el-table-column
prop="asin"
label="asin"
width="150"
fixed>
<template slot-scope="scope">
<el-link :href="scope.row.url" rel="external nofollow" type="primary" target="_blank">{{scope.row.asin}}</el-link>
</template>
</el-table-column>asin那一列通过<template>标签把scope传进去，scope是包含这一行的信息的，在标签里面使用<el-link>标签配合数据里面的url实现页面跳转，获取某个属性可以通过scope.row.属性名 获取
2、路由切换加传参数，先看效果
点击标题
可以看到路由切换到产品分析了，并且asin数据也传递过去了
实现直接看代码（需要注意的是需要传参的话只能使用name属性，使用path属性跳转是不能传递参数的）
<el-table-column
prop="title"
label="标题"
width="150"
:show-overflow-tooltip="true">
<template slot-scope="scope">
<router-link :to= "{name: 'productsAnalysis',params: {asin: scope.row.asin }}">
<span>
{{scope.row.title}}
</span>
</router-link>
</template>
</el-table-column>可以看到路由切换与页面跳转类似，都是通过<template>标签实现的，区别就是<router-link>里面直接
{{scope.row.title}}不好使，需要借助<span>标签实现内容展示路由切换使用路由名字
productsAnalysis，点击标题时路由器会找到productsAnalysis路由，并且把参数params传过去，看一下我的路由怎么实现的吧
{
path: '/console',
component: Layout,
redirect: '/console/productsAnalysis',
name: 'console',
meta: { title: '销售', icon: 'el-icon-s-help' },
children: [
{
path: 'productsAnalysis',
name: 'productsAnalysis',
component: () => import('@/views/products/productsAnalysis'),
meta: { title: '产品分析', icon: 'table' }
},
{
path: 'productPerspective',
name: 'productPerspective',
component: () => import('@/views/products/productPerspective'),
meta: { title: '产品透视', icon: 'table' }
}
]
},可以看到路由名为productsAnalysis的会跳转到
@/views/products/productsAnalysis组件
看一下productsAnalysis组件怎么拿到参数的
<template>
<dev>
<h1>ProductsAnalysis</h1>
<h1>{{asin}}</h1>
</dev>
</template>
<script>
import router from '@/router'
export default {
data(){
return{
asin: null
}
},
created() {
this.asin = this.$route.params.asin
}
}
</script>
<style scoped>
</style>直接
this.$route.params.asin就能拿到路由传过来的参数
到此这篇关于Vue+ElementUi实现点击表格中链接进行页面跳转和路由的文章就介绍到这了,更多相关Vue ElementUi表格链接跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！