vue-router——路由传值

一、用name传递参数

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

routes: [

    {

      path: '/',

      name: 'Hello',

      component: Hello

    }

]

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

{{ $route.name}}

二.通过 标签中的to传参

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

valueString

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

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

 详情页

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

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

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

 
{{$route.params.username}}

三.利用url传递参数

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

我的

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

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

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

{{ $route.params.newsId}}
{{ $route.params.newsTitle}}