vue 路由跳转传参的两种方式与区别

vue 路由跳转传参的两种方式与区别

1.query传参（传参的内容会显示在地址栏上面）

this.$router.push({
   path: '页面的路由',
   query: {
     id: '页面传参'
   }
 })

新页面取参(刷新页面参数不会丢失)：

this.$route.query.id

2.params传参（传参的内容不会出现在地址栏上）

this.$router.push({
        name: '设置路由时的name值',
        params: {
          id: '页面传参'
        }
      })

新页面取参：

this.$route.params.id

注意：params传参，刷新页面数据会丢失，不想丢失可以在路由地址上添加预置位：

//router配置
const routes = [{
    path: '/list/:id',
    name: 'list',
    component: List
}]

总结
query传参相当于get方式，会把要传递的参数显示在导航栏中。
params传参相当于post方式。默认不会把传递的参数显示在导航栏中。