Vue.js - 路由 vue-router 的使用详解2（参数传递）

原文链接：http://www.cnblogs.com/amujoe/p/11208457.html

一、使用冒号（:）的形式传递参数

1，路由列表的参数设置

（1）路由列表的 path 是可以带参数的，我们在路由配置文件（router/index.js）里以冒号的形式设置参数。 （2）下面样例代码中，我在跳转到欢迎页面（/hello）时，带有两个参数：id 和 userName。

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'  //引入首页组件
import hello from '@/components/hello'  //引入欢迎页组件

//Vue全局使用Router
Vue.use(Router)

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

2，参数的传递

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

<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>

4，运行效果

可以看到点击首页链接进行跳转后，参数成功传递并显示。
　　 　　　  

二、使用 query 方式传递参数

1，路由列表

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

2，参数的传递

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

<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>

4，运行效果 

可以看到点击首页链接进行跳转后，参数是自动拼接到 url 后面进行传递的。

三、使用 params 方式传递参数

1，路由列表

params 方式类似于 post 传参，即传递的参数不会显示在 URL 上。同上面的 query 方式一样，路由列表的 path 不需要配置参数：

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'  //引入首页组件
import hello from '@/components/hello'  //引入欢迎页组件

//Vue全局使用Router
Vue.use(Router)

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

2，参数的传递

注意：params 只能用 name 来引入路由，而不能用 path。

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

<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>

4，运行效果

可以看到这种方式，参数的传递不会拼接到 url 后面。  

附：使用 props 实现参数解耦 

    从上面的样例可以看出，当路由携带参数跳转时，页面这边通过 $route.params.xxx 或 $route.query.xxx 来获取传递过来的数据。但这样有个问题，由于组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。     要解决这个问题，我们可以使用 props 将组件和路由解耦。props 共有如下三种模式。  

1，布尔模式

（1）直接将路由配置中的 props 属性被设置为 true，那么参数将会被设置为组件属性。

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

（2）然后我们页面组件这边不再需要通过 $route.params.xxx 或 $route.query.xxx 来获取传递过来的数据。

<template>
<div>
<h1>ID：{{ id }}</h1>
<h1>用户名：{{ userName}}</h1>
</div>
</template>

<script>
export default {
name: 'hello',
props: ['id', 'userName']
}
</script>

2，对象模式

（1）我们可以将 props 设置为一个对象，对象内容会被设置为组件属性。这种方式常用来配置静态参数。

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

（2）然后页面组件这边获取数据方式和前面一样。

<template>
<div>
<h1>ID：{{ id }}</h1>
<h1>用户名：{{ userName}}</h1>
</div>
</template>

<script>
export default {
name: 'hello',
props: ['id', 'userName']
}
</script>

3，函数模式

（1）我们还可以创建一个函数返回 props，在函数中对参数值进行处理，或者将静态值与基于路由的值结合。

function dynamicPropsFunc (route) {
return {
message: "欢迎您：" + route.params.userName
}
}

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

（2）这里假设我们使用 JS 进行跳转，代码如下：

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

 

（3）目标页面组件代码，以及运行结果如下：

<template>
<div>
<h1>{{ message }}</h1>
</div>
</template>

<script>
export default {
name: 'hello',
props: ['message']
}
</script>

 

转载于:https://www.cnblogs.com/amujoe/p/11208457.html