快捷導(dǎo)航

Vue+ElementUi實現(xiàn)點擊表格中鏈接進(jìn)行頁面跳轉(zhuǎn)與路由詳解

更新時間：2023年02月13日 10:33:56 作者：記億揺晃著的那天

在vue中進(jìn)行前端網(wǎng)頁開發(fā)時,通常列表數(shù)據(jù)用el-table展示,下面這篇文章主要給大家介紹了關(guān)于Vue+ElementUi實現(xiàn)點擊表格中鏈接進(jìn)行頁面跳轉(zhuǎn)與路由的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1、頁面跳轉(zhuǎn)，先看效果

點擊表格中的asin會跳轉(zhuǎn)到亞馬遜購物界面

怎么做的呢，直接上代碼

<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>標(biāo)簽把scope傳進(jìn)去，scope是包含這一行的信息的，在標(biāo)簽里面使用<el-link>標(biāo)簽配合數(shù)據(jù)里面的url實現(xiàn)頁面跳轉(zhuǎn)，獲取某個屬性可以通過scope.row.屬性名獲取

2、路由切換加傳參數(shù)，先看效果

點擊標(biāo)題

可以看到路由切換到產(chǎn)品分析了，并且asin數(shù)據(jù)也傳遞過去了

實現(xiàn)直接看代碼

<el-table-column
        prop="title"
        label="標(biāo)題"
        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>

可以看到路由切換與頁面跳轉(zhuǎn)類似，都是通過<template>標(biāo)簽實現(xiàn)的，區(qū)別就是<router-link>里面直接

{{scope.row.title}}不好使，需要借助<span>標(biāo)簽實現(xiàn)內(nèi)容展示

路由切換使用路由名字

productsAnalysis，點擊標(biāo)題時路由器會找到productsAnalysis路由，并且把參數(shù)params傳過去，看一下我的路由怎么實現(xiàn)的吧

{
    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: '產(chǎn)品分析', icon: 'table' }
      },
      {
        path: 'productPerspective',
        name: 'productPerspective',
        component: () => import('@/views/products/productPerspective'),
        meta: { title: '產(chǎn)品透視', icon: 'table' }
      }
    ]
  },

可以看到路由名為productsAnalysis的會跳轉(zhuǎn)到

@/views/products/productsAnalysis組件

看一下productsAnalysis組件怎么拿到參數(shù)的

<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就能拿到路由傳過來的參數(shù)

總結(jié)

到此這篇關(guān)于Vue+ElementUi實現(xiàn)點擊表格中鏈接進(jìn)行頁面跳轉(zhuǎn)與路由的文章就介紹到這了,更多相關(guān)Vue ElementUi點擊鏈接頁面跳轉(zhuǎn)和路由內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: