Vue路由导航两种方式router-link router.push

1、页面效果

2、路由配置router.js

{
    path: '/contract',
    component: Layout,
    hidden: true,
    children: [
      {
        path: 'type/invoice/:dataId/:itemId/:number/:name',
        component: () => import('@/views/itemmanage/contract/invoice'),
        name: 'Invoice',
        meta: { title: '合同发票', icon: '' }
      }
      ,
      {
        path: 'type/schedule/:dataId/:itemId/:amount/:number/:name',
        component: () => import('@/views/itemmanage/contract/schedule'),
        name: 'Schedule',
        meta: { title: '付款计划', icon: '' }
      },
    ]
  },

3、html

 <el-col :span="1.5">
    <el-button
       type="primary"
       size="mini"
       :disabled="single"
       @click="handleToinvoice"
       v-hasPermi="['itemmanage:contract:remove']"
     >付款计划</el-button>
   </el-col>
    <el-col v-if="singleRow.length == 1" :span="1.5">
       <router-link :to="'/contract/type/invoice/' + singleRow[0].itemContractId +'/'+ singleRow[0].itemId
        +'/'+ singleRow[0].contractNumber +'/'+ singleRow[0].contractName"  class="link-type">
         <el-button
         size="mini"
         type="text"
         :disabled="single"
          v-hasPermi="['itemmanage:contract:invoice']"
        >合同发票</el-button>
       </router-link>
   </el-col>

methods

//页面跳转
 handleToinvoice(){
   this.$router.push({
     path:'/contract/type/invoice/', 
     name:'Invoice',
     params:{ 
       dataId: this.singleRow[0].itemContractId ,
       itemId:  this.singleRow[0].itemId,
       number: this.singleRow[0].contractNumber,
       name: this.singleRow[0].contractName
     }
   })
 },

4、小结

1、 带参数的路由

无论是直接路由“path" 还是命名路由“name”，带查询参数query，地址栏会变成“/url?查询参数名：查询参数值“;

2、 获取参数方法：

this.$route.params.Name