第3節：vue-router如何參數傳遞
阿新 • • 發佈：2018-01-14
方法 log mini 程序 int str 來看 bsp 名稱
原文網址：http://jspang.com/2017/04/13/vue-router/
開發中，參數的傳遞是個最基本的業務需求。通過URL地址來傳遞參數是一個形式，這節課我們就看看vue-router為我們提供了那些傳遞參數的功能。我們先想象一個基本需求，就是在我們點擊導航菜單時，跳轉頁面上能顯示出當前頁面的路徑，來告訴用戶你想在所看的頁面位置（類似於面包屑導航）。
一、用name傳遞參數
前兩節課一直出現name的選項，但是我們都沒有講，這節課我們講name的一種作用，傳遞參數。接著上節課的程序繼續編寫。
兩步完成用name傳值並顯示在模板裏：
- 在路由文件src/router/index.js裏配置name屬性。
1 2 3 4 5 6 7 routes: [ { path: ‘/‘, name: ‘Hello‘, component: Hello } ] - 模板裏(src/App.vue)用$router.name的形勢接收，比如直接在模板中顯示：
1 <p>{{ $router.name}}</p>
二、通過<router-link> 標簽中的to傳參
也許你也會覺的上邊的傳參很不正規，也不方便，其實我們多數傳參是不用name進行傳參的，我們用<router-link>標簽中的to屬性進行傳參，需要您註意的是這裏的to要進行一個綁定，寫成:to。先來看一下這種傳參方法的基本語法：
| 1 | <router-link :to="{name:xxx,params:{key:value}}">valueString</router-link> |
這裏的to前邊是帶冒號的，然後後邊跟的是一個對象形勢的字符串.
- name：就是我們在路由配置文件中起的name值。
- params：就是我們要傳的參數，它也是對象形勢，在對象裏可以傳遞多個值。
了解基本的語法後，我們改造一下我們的src/App.vue裏的<router-link>標簽,我們把hi1頁面的<router-link>進行修改。
| 1 | <router-link :to="{name:‘hi1‘,params:{username:‘jspang‘}}">Hi頁面1</router-link> |
把src/reouter/index.js文件裏給hi1配置的路由起個name,就叫hi1.
| 1 | {path:‘/hi1‘,name:‘hi1‘,component:Hi1}, |
最後在模板裏(src/components/Hi1.vue)用$route.params.username進行接收.
| 1 | {{$route.params.username}} |
總結：
今天我們學習了兩種傳參的方法，一般會使用第二種方法。我們通過學習也知道了name的用途，一種作用是傳參，一種作用是在傳參時起到名稱作用。傳參的操作在實際開發中是基本的需求，我們一定要掌握好啊。
第3節：vue-router如何參數傳遞