vue-router之路由传值

一、用name传递参数

1.在路由文件src/router/index.js里配置name属性。

?

routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]

2.模板里(src/App.vue)用$route.name的形势接收，比如直接在模板中显示：

?

1

{{ $route.name}}

二.通过 标签中的to传参

也许你也会觉的上边的传参很不正规，也不方便，其实我们多数传参是不用name进行传参的，我们用标签中的to属性进行传参，需要您注意的是这里的to要进行一个绑定，写成:to。先来看一下这种传参方法的基本语法：

?

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

name：就是我们在路由配置文件中起的name值。 params：就是我们要传的参数，它也是对象形势，在对象里可以传递多个值。

1.我们改造一下我们的src/App.vue里的标签

?

<router-link :to="{name:'xxx',params:{username:'haohaoxuexi'}}">详情页</router-link>

2.把src/reouter/index.js文件里给details配置的路由起个name,叫xxx.

?

{
    path: '/details',
    name: 'xxx',
    component: details
}

3.最后在模板里(src/components/details.vue)用$route.params.username进行接收.

?

1

{{$route.params.username}}

三.利用url传递参数

1.修改App.vue的标签（类似函数的实参传递）

?

<router-link to="/params/198/js is very good">我的</router-link>

2.修改index.js文件里的配置（类似函数的形参接收）

?

{
    path: '/params/:newsId/:newsTitle',
    name: 'mine',
    component: mine
}

3.最后在模板里(src/components/mine.vue)进行接收.

?

1

{{ $route.params.newsId}}

{{ $route.params.newsTitle}}