vue页面跳转，并在tab上显示名称

效果图：

勾选商品，点击打印时，携带商品信息参数跳转到打印页面，并在tab上显示标签名称

案例实现流程

1、创建列表页

<template>
  <div class="mod-config">
    <el-form>
      <el-form-item>        
        <el-button-group>
          <el-button size="mini" v-if="isAuth('sale:print:info')" :disabled="dataListSelections.length <= 0" type="qblue" @click="printNoBackground()"
            class="iconfont icon-print">打印(无背景)</el-button>
        </el-button-group>       
      </el-form-item>      
    </el-form>
    <el-table :data="dataList" size="mini" v-loading="dataListLoading" @selection-change="selectionChangeHandle"
      style="width: 100%;"
      :header-cell-style="{ background: '#fcfcfc', color: '#606266', height:'36px'}">
      <el-table-column type="selection" header-align="center" align="center" width="50">
      </el-table-column>
      <el-table-column prop="productCode" header-align="center" align="center" label="产品编号">
      </el-table-column>
      <el-table-column prop="productName" header-align="center" align="center" label="产品名称" width="150" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="genericName" header-align="center" align="center" label="通用名" v-if="false">
      </el-table-column>
      <el-table-column prop="standard" header-align="center" align="center" label="规格">
      </el-table-column>
      <el-table-column prop="unit" header-align="center" align="center" label="单位">
      </el-table-column>
      <el-table-column prop="barCode" header-align="center" align="center" label="条形码">
      </el-table-column>
      <el-table-column prop="producingArea" header-align="center" align="center" label="产地" width="150" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="produceFactory" header-align="center" align="center" label="生产单位" width="150" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="approvalNo" header-align="center" align="center" label="批准文号" width="130" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="dosageForm" header-align="center" align="center" label="剂型">
      </el-table-column>    
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>  
  </div>
</template>

<script>  
  import {Loading  } from "element-ui"
  export default {
    data() {
      return {        
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],       
      }
    },    
    activated() {
      this.getDataList()
    },
    methods: {
      // 获取数据列表
      async getDataList() {
        this.dataListLoading = true
        let printDatas = JSON.parse(sessionStorage.getItem("printDatas"))
        if(printDatas && printDatas.length > 0){
          this.dataList = printDatas
        }
        this.dataListLoading = false
      },      
      // 多选
      selectionChangeHandle(val) {
        this.dataListSelections = val
      },
      printNoBackground(){
        let products = JSON.stringify(this.dataListSelections)
        this.$router.push({name:'printnoback',query: {products}})
      },
          
    },
  }
</script>

1.1）为按钮绑定事件 printNoBackground，

<el-button size="mini" v-if="isAuth('sale:print:info')" :disabled="dataListSelections.length <= 0" type="qblue" @click="printNoBackground()" class="iconfont icon-print">打印(无背景)</el-button>

1.2）按钮绑定事件实现

跳转使用 this.$router.push

printNoBackground(){
        let products = JSON.stringify(this.dataListSelections)
        this.$router.push({name:'printnoback',query: {products}})
      },

2、创建要跳转的页面

接收差数 products : this.$route.query.products

<template>
	<div>
		<h1>详情页面</h1>
		<div>
			<el-button type="primary" @click="toList">点击返回列表</el-button>
			<div>传递参数：{{products}}</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "printnoback",
		data() {
			return {
				products : this.$route.query.products
			};
		},
		methods:{
			toList(){
				this.$router.push({
					name: 'List',
				})
			}
		}
	}
</script>

3、在router.js里设置路径

isTab: true 表示跳转后在tab栏显示

const mainRoutes = {
  path: '/',
  component: _import('main/main'),
  name: 'main',
  redirect: {
    name: 'home'
  },
  meta: {
    title: '主入口整体布局'
  },
  children: [
{
      path: '/printnoback',
      component: _import('modules/old/common/printnoback'),
      name: 'printnoback',
      meta: {
        title: '标价签预览(无背景)',
        isTab: true
      }
    },
 ]