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

发布时间:2023-03-25 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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、路由切换加传参数,先看效果

&nbsp;点击标题

可以看到路由切换到产品分析了,并且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点击链接页面跳转和路由内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!

脚本宝典总结

以上是脚本宝典为你收集整理的Vue+ElementUi实现点击表格中链接进行页面跳转与路由详解全部内容,希望文章能够帮你解决Vue+ElementUi实现点击表格中链接进行页面跳转与路由详解所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。