vue-router
传递参数分为两大类
- 编程式的导航
router.push
- 声明式的导航
<router-link>
- 声明式的导航 <router-link>
一、用name
传递参数
1.在路由文件src/router/index.js
里配置name
属性
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
2.模板里(src/App.vue
)用$route.name
的形势接收,比如直接在模板中显示:
<p>{{ $route.name}}</p>
二、通过<router-link>
标签中的to
传参
其实我们多数传参是不用name
进行传参的,我们用<router-link>
标签中的to
属性进行传参,需要您注意的是这里的to
要进行一个绑定,写成:to
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>
这里的to
前边是带冒号的,然后后边跟的是一个对象形势的字符串.
name
:就是我们在路由配置文件中起的name
值。params
:就是我们要传的参数,它也是对象形式,在对象里可以传递多个值。
了解基本的语法后,我们改造一下我们的src/App.vue
里的<router-link>
标签,我们把hi1
页面的<router-link>
进行修改。
<!--命名路由-->
<router-link :to="{name:'hi1',params:{username:'jspang'}}">Hi页面1</router-link>
<!--查询参数-->
<router-link :to="{ path: '/news', query: { userId: 1111}}">click to news page</router-link>
把src/reouter/index.js
文件里给hi1
配置的路由起个name
,就叫hi1.
{path:'/hi1',name:'hi1',component:Hi1},
最后在模板里(src/components/Hi1.vue
)用$route.params.username
进行接收.
{{$route.params.username}}
1.命名路由搭配
params
,刷新页面参数会丢失
2.查询参数搭配query
,刷新页面数据不会丢失
3.接受参数使用this.$router
后面就是搭配路由的名称就能获取到参数的值
三.按照平时的?
参数的方式
<li><router-link to="/user/regist?name=alice&pwd=456">用户注册</router-link></li>
//2.配置路由
const routes=[
{
path:'/user',
component:User,
children:[
{
path:'regist',
component:Regist
}
]
}
];
通过$route.query
获取参数
//获取参数
var Regist={
template:'<h4>用户注册中。。。。获取参数:{{$route.query}}</h4>'
}
四.通过to="/user/login/参数1/参数2
"传参
<li><router-link to="/user/login/tom/123">用户登陆</router-link></li>
//2.配置路由
const routes=[
{
path:'/user',
component:User,
children:[
{
path:'login/:username/:password',
component:Login
}
]
}
];
通过$route.params
接收参数
//接收参数
var Login={
template:'<h4>用户登陆中。。。。获取参数:{{$route.params}}</h4>'
}
五.props
传 params
在组件中使用 $route
会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL
上使用,限制了其灵活性。
使用 props
将组件和路由解耦:
通过 props
的方式,实现了解耦,可以在其他地方使用组件,只需要传 props
即可。
使用 props
将组件和路由解耦:
取代与 $route
的耦合
onst User = {
template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
通过 props
解耦
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true },
// 对于包含命名视图的路由,你必须分别为每个命名视图添加 `props` 选项:
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
props
指定值
// client/config/routes.js
export default [
{
path: '/app/:id',
props: {
id: '456'
},
component: Todo,
}
]
props
函数
通过 query
指定 id
// client/config/routes.js
export default [
{
path: '/app/:id',
props: (route) => ({ id: route.query.id }) // 通过 query 指定 id
component: Todo,
}
]
编程式的导航 router.push
1.query
方式传参和接收参数
//query传参,使用path跳转
this.$router.push({
path:'second',
query: {
queryId:'20180822',
queryName: 'query'
}
})
//query传参接收
this.queryName = this.$route.query.queryName;
this.queryId = this.$route.query.queryId;
注意:传参是
this.$router,
接收参数是this.$route,
这里千万要看清了!!!
2.params
方式传参和接收参数
//params传参 使用name
this.$router.push({
name:'second',
params: {
id:'20180822',
name: 'query'
}
})
//params接收参数
this.id = this.$route.params.id ;
this.name = this.$route.params.name ;
//路由
{
path: '/second/:id/:name',
name: 'second',
component: () => import('@/view/second')
}
特别注意:命名路由这种方式传递的参数,如果在目标页面刷新是会出错的,如果没有在路由中声明参数,那么参数不会在地址栏出现,但是刷新页面就会导致获取不到参数
原因:params
是路由的一部分,必须要在路由后面添加参数名。query
是拼接在url
后面的参数,没有也没关系。
params
一旦设置在路由,params
就是路由的一部分,如果这个路由有params
传参,但是在跳转的时候没有传这个参数,会导致跳转失败或者页面会没有内容。
解决:如果路由后面没有 /:id/:name
,地址栏没有参数 ,如果你刷新一下,就会发现页面失败,所以我们必须在路由后面加上 /:id/:name
注意:
params
传参,push
里面只能是name:'xxxx'
,不能是path:'/xxx'
,因为params
只能用name
来引入路由,如果这里写成了path
,接收参数页面会是undefined
!!!和name
配对的是params
,和path
配对的是query
二者还有点区别,query
相当于get
请求,页面跳转的时候,可以在地址栏看到请求参数,而params
相当于post
请求,参数不会再地址栏中显示。
- 直接调用
$router.push
实现携带参数的跳转
this.$router.push({
path: `/describe/${id}`,
})
{
path: '/describe/:id',
name: 'Describe',
component: Describe
}
很显然,需要在path
中添加/:id
来对应 $router.push 中path
携带的参数。在子组件中可以使用来获取传递的参数值。
this.$route.params.id