路由配置带参数

一.使用冒号（:）的形式传递参数 或者说 采用url传参
二.使用 query 方式传递参数
三.使用 params方式传递参数

一.使用冒号（:）的形式传递参数 或者说 采用url传参

在跳转到欢迎页面（/hello）时，带有两个参数：id 和 userName。

routes: [ //配置路由，使用数组形式
  {
      path: '/',   //链接路径
      name: 'index',  //路由名称
      component: index  //映射的组件
  },
  {
      path: '/hello/:id/:userName',
      name: 'hello',
      component: hello
  }]

（1）如果使用 组件跳转的话，可以这么携带参数：

<router-link to="/hello/123/hangge">跳转到 hello</router-link>

（2）如果使用 js 代码跳转的话，可以这么携带参数：

this.$router.push("/hello/123/hangge");

（3） 页面中通过 $route.params.xxx 获取传递过来的数据

<template>
<div>
  <h1>ID：{{ $route.params.id}}</h1>
  <h1>用户名：{{ $route.params.userName}}</h1>
</div>
</template>

二、使用 query 方式传递参数

query 方式类似 get 传参，即通过 URL 传递参数。而路由列表的 path 不需要配置参数：

export default new Router({
  routes: [ //配置路由，使用数组形式
    {
      path: '/',   //链接路径
      name: 'index',  //路由名称
      component: index//映射的组件
    },
    {
      path: '/hello',
      name: 'hello',
      component: hello
    }
  ]
})

2，参数的传递
（1）如果使用 组件跳转的话，可以这么携带参数：

<router-link :to="{path:'/hello', query:{id:123, userName:'hangge'}}">
跳转到 hello
</router-link>

（2）如果使用 js 代码跳转的话，可以这么携带参数：

this.$router.push({`
  path:'/hello',
  query:{
     id:123, 
     userName:'hangge'
   }
});

（3）参数的获取

页面中通过 $route.query.xxx 获取传递过来的数据。

<template>
<div>
<h1>ID：{{ $route.query.id}}</h1>
<h1>用户名：{{ $route.query.userName}}</h1>
</div>
</template>

三、使用 params 方式传递参数

query 方式类似 get 传参，即通过 URL 传递参数。而路由列表的 path 不需要配置参数：

export default new Router({

routes: [ //配置路由，使用数组形式
{
    path: '/',   //链接路径
    name: 'index',  //路由名称
    component: index//映射的组件
},
{
   path: '/hello',
   name: 'hello',
   component: hello
}]
})

2，参数的传递
注意：params 只能用 name 来引入路由，而不能用 path。
（1）如果使用 组件跳转的话，可以这么携带参数：

<router-link :to="{name:'hello', params:{id:123, userName:'hangge'}}">
跳转到 hello
</router-link>

（2）如果使用 js 代码跳转的话，可以这么携带参数：

this.$router.push({
name:'hello',
params:{id:123, userName:'hangge'}
});

（3）参数的获取

页面中通过 $route.params.xxx 获取传递过来的数据。

<template>
<div>
<h1>ID：{{ $route.params.id}}</h1>
<h1>用户名：{{ $route.params.userName}}</h1>
</div>
</template>