vue路由传递参数query

1、建立需要传递参数的组件

2、 配置路由映射

  {
    path: '/profile',
    component: Profile
  }

3、添加跳转的<router-link>或者代码跳转传递参数

1、<router-link>的params传参

params的类型:

①配置路由格式: /router/:id

②传递的方式: 在path后面跟上对应的值

③传递后形成的路径: /router/123, /router/abc

 

如果传递参数那么不能单独写字符串’/profile‘；而是要是个对象{}：其中path是路径，query是参数 

<router-link v-bind:to="'/user/' + userId" replace>用户</router-link>
    <router-link
      v-bind:to="{
        path: '/profile',
        query: { name: 'why', age: 18, height: 1.88 },
      }"
      >档案</router-link>

下面①的传递参数 ②是获取参数

 2、JavaScript代码传参

query的类型:

①配置路由格式: /router, 也就是普通配置

②传递的方式: 对象中使用query的key作为传递方式

③传递后形成的路径: /router?id=123, /router?id=abc

下面①的传递参数 ②是获取参数