在做VUE项目时遇到的问题及解决办法：使用路由跳转页面时传参的两种方法，以及这两种方法的综合使用

一、使用path和query，使用该方式跳转的页面在路径中会携带query中的参数，这种方式重新加载页面后参数依然存在；

1.通过router-link进行跳转：

<router-link to="{path:'/search-list-all',query:{searchVal:searchInfo}}"></router-link>

2.使用$router方式跳转，此方法写在methods里：

this.$router.push({
  path:'/search-list-all',
  query:{
    searchVal:searchInfo
  }
})

注意：在这里path是路由的路径

在跳转后的页面接收参数（获取时是$route而不是$router）：

this.$route.query.searchVal

二、使用name和params，使用params传参会导致页面刷新时，记录不了参数；

1.通过router-link进行跳转：

<router-link to="{name:'SearchListAll',params:{searchVal:searchInfo}}"></router-link>

2.使用$router方式跳转，此方法写在methods里：

this.$router.push({
  name:'SearchListAll',
  params:{
    searchVal:searchInfo
  }
})

注意：在这里name是路由的名称name

在跳转后的页面接收参数（获取时是$route而不是$router）：

this.$route.params.searchVal

在路由里定义的路径如下：

export default new Router({
    routes: [
        {
          path: '/search-list-all',
          name: 'SearchListAll',
          component: SearchListAll
        }
    ]
})

最后，是这两种方式的综合使用（即在页面跳转时，使用query和params传参）：

    this.$router.push({
        path:'/search-list-all',
        name: 'SearchListAll',
        query:{
          secondId:secondId,
          thirdId:thirdId,
        },
        params:{
          thirdName:thirdName
        }
    })

接收参数方式同上。

2021-04-26更新（这种方式是常用的，比上述方式都好使，不过同时也存在缺陷，那就是对应的参数必须要传，否则无法跳转路由）：
还有一种方式，在router.js里面定义，如
 

{
    path: '/suppliers/:keyword',
    name: 'Suppliers',
    component: () => import('@/views/suppliers/index')
  }

在路由跳转时，可配合es6语法的使用：

this.$router.push(`/suppliers/${this.keyword}`)

在接收路由参数时：

this.keyword = this.$route.params.keyword