vue-router路由传参

vue-router路由传参的方式

一、动态路由参数

页面刷新，参数也不会丢失

路由：

  {
    path: "/paramsPass/:id",
    component: () => import("../views/paramsPass.vue"),
  }

跳转：

    jump(id) {
      this.$router.push({
        path: `/paramsPass/${id}`,
      });
    }

url:

http://localhost:8080/#/paramsPass/66

获取参数：

方式1：this.$route.params获取参数对象

this.$route.params

方式2：props接收

路由种添加props属性

  {
    path: "/paramsPass/:id",
    component: () => import("../views/paramsPass.vue"),
    props: true,
  },

组件中props接收

  props: {
    id: {
      type: String,
    },
  },

二、params

通过name来匹配路由

    jump() {
      this.$router.push({
        name: "targetPath",
        params: {
          name: "luka",
          age: 20,
        },
      });
    }

根据name来匹配url路径

注意：页面刷新参数就丢失了

获取路由参数的方式

this.$route.params可获取参数对象

三、query

传递的参数会以问号开始，参数拼接在url后面，刷新页面参数依然存在

    jump() {

      this.$router.push({

        path: "/slotUse",

        query: {

          name: "luka",

          age: 20,

        },

      });

    },

url:

http://localhost:8080/#/slotUse?name=luka&age=20

this.$route.query就可以拿到参数对象了