## 基本用法1 用 Vue.js + vue-router 創建單頁應用，是非常簡單的。使用 Vue.js ，我們已經可以通過組合組件來組成應用程序，當你把 vue-router 添加進來，Vue-router的基本作用就是將每個路徑映射到對應的組件，并通過修改路由進行組件間的切換。 ### 第一個單頁面應用 現在我們以一個簡單的單頁面應用開啟vue-router之旅，這個單頁面應用有3個路徑：/home 、list，/about，與這兩個路徑對應的是3個組件Home、List和About。  **HTML** >[info]1.首先引入vue.js和vue-router.js： ~~~ <script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script> <script src="../lib/vue-router.js" type="text/javascript" charset="utf-8"></script> ~~~ >[info]2.使用 使用 router-link 組件來導航. ~~~ <ul class="nav navbar-nav"> <!-- 使用 router-link 組件來導航. --> <!-- 通過傳入 `to` 屬性指定鏈接. --> <!-- <router-link> 默認會被渲染成一個 `<a>` 標簽 --> <li> <router-link to="/home" >Home</router-link></li> <li> <router-link to="/list" >List</router-link></li> <li> <router-link to="/about">About</router-link></li> </ul> ~~~ >[info]3.使用<router-view>標簽 ~~~ <!-- 路由出口 --> <!-- 路由匹配到的組件將渲染在這里 --> <router-view></router-view> ~~~ **JavaScript** >[info]1.創建組件 在js中創建3個組件Home、List、About： - 創建組件 Home ~~~ var Home ={ template: `<div class="jumbotron"> <h1>{{msg}}</h1> <p>...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div>`, data: function() { return { msg: 'Hello, vue router!' } } } ~~~ - 創建組件 List ~~~ var List ={ template: `<div class="list-group"> <a href="#" class="list-group-item" v-for="item in msg"> {{item.title}} </a> </div>`, data: function() { return { msg:[ {title:'Dapibus ac facilisis in'}, {title:'Morbi leo risus'}, {title:'Porta ac consectetur ac'}, {title:'Vestibulum at eros'}, {title:'Cras justo odio'}, ] } } } ~~~ - 創建組件 About ~~~ var About = { template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>' } ~~~ >[info]2.定義路由,每個路由應該映射一個組件。 ~~~ const routes = [ { path: '/home', component: Home }, { path: '/list', component: List }, { path: '/about', component: About } ] ~~~ >[info] 3.創建 router 實例，然后傳 `routes` 配置 ~~~ const router = new VueRouter({ routes // （縮寫）相當于 routes: routes }) ~~~ >[info]4.創建和掛載根實例。 記得要通過 router 配置參數注入路由，從而讓整個應用都有路由功能 ~~~ const app = new Vue({ router }).$mount('#app') ~~~ 現在，應用已經啟動了！  ------- >[success]預覽：http://vue.taoge1024.com/Vue-router/01/router01.html git地址： ----------------------- >[danger]上述代碼在瀏覽器打開時，內容區域為空，只有點擊切換的時候才有內容，是因為我們沒有定義默認路由，定義默認路由，同樣比較簡單，只需要在映射路由時，指定一個根目錄，指定要顯示哪個組件。 ~~~ const routes = [ { path: '/', component: Home },//指定默認進來的組件 { path: '/home', component: Home }, { path: '/list', component: List }, { path: '/about', component: About } ] ~~~ ------------------- >[success]預覽：http://vue.taoge1024.com/Vue-router/01/router02.html git地址：