一、使用冒号(:)的形式传递参数
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 不需要配置参数:
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,参数的传递
(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>