[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}} ~~~