Vue+ElementUi实现点击表格中链接进行页面跳转与路由详解

目录

• 1、页面跳转，先看效果
• 2、路由切换加传参数，先看效果
• 总结

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数据也传递过去了

实现直接看代码

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点击链接页面跳转和路由内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• element-ui使用导航栏跳转路由的用法详解
• 详解ElementUI之表单验证、数据绑定、路由跳转

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！