[TOC] # 用name传递参数 前两节课一直出现name的选项，但是我们都没有讲，这节课我们讲name的一种作用，传递参数。接着上节课的程序继续编写。 两步完成用name传值并显示在模板里： 1. 在路由文件src/router/index.js里配置name属性 ~~~ routes: [ { path: '/', name: 'Hello', component: Hello } ] ~~~ 2. 模板里(src/App.vue)用$router.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> ~~~ 把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1. ~~~ {path:'/hi1',name:'hi1',component:Hi1}, ~~~ 最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收. ~~~ {{$route.params.username}} ~~~