vue-router路由传递参数的几种方式

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

主要分为两大类: 1. params传递参数；2. query传递参数。

主要区别：

query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，

而 params相当于post请求，参数不会再地址栏中显示

一、params：传参。F5强制刷新参数会被清空。使用方法如下：

配置路由;
传递参数，用$router; 一定要写 name,params必须用name来识别路径

<a @click="routerTo">params传递参数</a>
routerTo() {
  this.$router.push({
    path: "/list",
    name: "List",
    params: {
      page: "1",
      code: "9999",
    },
  });
},

接收参数，用$route;

export default{
  data() {
    return {
      page: '',
      code: ''
    }
  },
  created() {
    this.getRouterData()
  },
  methods: {
    getRouterData() {
      this.page = this.$route.params.page
      this.code = this.$route.params.code
      console.log('page', this.page)
      console.log('code', this.code)
    }
  }
}

二、query：传参。F5强制刷新参数不会被清空，会显示在路由中。使用方法如下：

配置路由;
传递参数，用$router; 也要写 name,path必须用name来识别路径

<a @click="routerTo2">query传递参数</a>
routerTo2() {
  this.$router.push({
    path: "/list",
    name: "List",
    query: {
      page: "1",
      code: "9999",
    },
  });
},

接收参数，用$route;

export default{
  data() {
    return {
      page: '',
      code: ''
    }
  },
  created() {
    this.getRouterData2()
  },
  methods: {
    getRouterData2() {
      this.page = this.$route.query.page
      this.code = this.$route.query.code
      console.log('page', this.page)
      console.log('code', this.code)
    }
  }
}

三、拼接方式：直接调用$router.push 实现携带参数的跳转，通过路由拼接

场景：点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件：

<li v-for="article in articles" @click="getDescribe(article.id)">

getDescribe(id) {
    this.$router.push({
      path: `/describe/${id}`,
    })
}

路由配置：对应路由配置如下：

{
 path: '/describe/:id',
 name: 'Describe',
 component: Describe
}

在子组件中可以使用来获取传递的参数值:this.$route.params.id。

如果想传递多个值配置如下: path:'/describe/:id/:age/:num/···', 路由跳转方法如下： getDescribe(id) { this. $router.push({ path: `/describe/$ {id}/ ${age}/$ {num}`, }) }

四、注意事项：

由于query与params传参机制不一样，造成的差异，如果要隐藏参数用params，如果强制刷新不被清除用query。
path不能与params一起使用，需要通过path来匹配路由的时候，使用query来传参。
query要用path来引入，params要用name来引入。