vue-router之参数传递

vue-router 参数传递相关

使用query传递参数

首先新建两个vue文件，它们可以是父子组件关系也可以不是
hello.vue

1
2
3
<div class="hello">
 <router-link :to="{path: '/child', query: {id: '123'}}">query传递参数</router-link>
 </div>

child.vue
子页面通过$route.query.id获取传过来的参数

1
2
3
<div id="child">
    <p>query传过来的参数{{$route.query.id}}</p>
  </div>

配置路由

1
2
3
4
5
6
7
8
9
10
{
    path: '/',
    name: 'Hello',
    component: Hello,
},    
{
    path: '/child',
    name: 'child',
    component: child
}

传递的参数会显示在url中
Alt text
Alt text

使用params传递参数

使用params传参有两种方法，一种会将参数显示在url中，另一种则不会显示在url中
同上新建两个vue文件
hello.vue

1
2
3
4
<div class="hello">
	    <router-link :to="{path: '/helloChild/123'}">params传递参数（url中显示）</router-link>
	<router-view></router-view>
	</div>

helloChild.vue

1
2
3
<div id="helloChild">
    <p>params传过来的参数：{{$route.params.id}}</p>
  </div>

配置路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  path: '/',
  name: 'Hello',
  component: Hello,
  children: [{
 // 参数显示在url中
    path: '/helloChild/:id',
    name: 'helloChild',
    component: helloChild
  }, {
    // 参数不显示在url中
    path: '/helloChild/id',
    name: 'helloChild2',
    component: helloChild
  }]
}
  • params传参（显示在url中）
    传递参数时直接将参数加在url中，如上：
    path: '/helloChild/123'
    Alt text
    Alt text
  • parmas传参（不显示在url中）
    传递参数时采用params: {参数名: 参数值}这种方式传递，如上：
    {name: 'helloChild2', params: {id: '456'}}
    Alt text
    Alt text