vue-cli(二) vue-router参数传递

[NPLUSWEB]

vue-router参数传递

vue-router参数有两种“路由参数”和“url查询参数”

路由参数

配置：

{
    path: '/user/:userId/:userName',
    name: 'user',
    component: user
}

使用：

<router-link :to="{name:'user',params: {userId:1,uerName:’admin’}}"> //标签使用方式

router.push({name:'personalCenter',params: {userId:user.id}) //js使用方式

链接显示：

/user/1/admin

获取参数值：

this.$route.params.userId

url查询参数

配置：

{
    path: '/user',
    name: 'user',
    component: user
}

使用：

<router-link :to="{name:'user',query: {userId:1,uerName:’admin’}}"> //标签使用方式

router.push({name:'personalCenter',query: {userId:user.id}) //js使用方式

链接显示：

/user？userId=1&uerName=admin

获取参数值：

this.$route.query.userId