vue-router——路由传值

一、用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>

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

1.我们改造一下我们的src/App.vue里的<router-link>标签

 <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进行接收.

 <p>{{$route.params.username}}</p>

三.利用url传递参数

1.修改App.vue的<router-link>标签（类似函数的实参传递）

<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)进行接收.

<p>{{ $route.params.newsId}}</p>
<p>{{ $route.params.newsTitle}}</p>