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

<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>

<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>

{
    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' }
      }
    ]
  },

<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>