vue的路由可以選可以不選，但單頁應用是必選，
將組件(components)映射到路由(routes)，然后告訴 vue-router 在哪里渲染它們，這里用的都是vue2.0和vue-router2.0。
一、 首先我們來看一下組件
1、組件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可復用的組件構建大型應用。仔細想想，幾乎任意類型的應用界面都可以抽象為一個組件樹。官方就是這么說的，別太在意，淺顯點理解你就認為組件就是開發中單獨可復用的頁面組合。
如何定義：Vue.component('yourcomponent',{template:'<li>your content</li>'})
在頁面使用就是可以這樣來了<div><yourcomponent></yourcomponent></div>
2、給組件傳值
關鍵字props
下面是官方
<div id="app-7"> <ol> <!-- 現在我們為每個 todo-item 提供 todo 對象 todo 對象是變量，即其內容可以是動態的。 我們也需要為每個組件提供一個“key”，稍后再 作詳細解釋。 --> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"> </todo-item> </ol> </div> Vue.component('todo-item', { // todo-item 組件現在接受一個 // "prop"，類似於一個自定義特性。 // 這個 prop 名為 todo。 props: ['todo'], template: '<li>{{ todo.text }}</li>' }) Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) var app7 = new Vue({ el: '#app-7', data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '奶酪' }, { id: 2, text: '隨便其它什么人吃的東西' } ] } })
例子
組件先說到這里 我們可以跟路由結合來說組件。
二、路由
用過spring MVC 、net MVC、angularjs 的對路由肯定很熟悉，這里的單頁應用的路由也是對選擇哪個子頁面路徑的一種選擇器
在這里只考慮vue-router 不考慮第三方路由
以后再來看這些復雜的第三方路由
1、我們用例子來看路由
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" /> </head> <body> <div id="app"> <div class="row"> <div class="col-xs-offset-2 col-xs-8"> <div class="page-header"> <h2>Router Basic - 01</h2> </div> </div> </div> <div class="row"> <div class="col-xs-2 col-xs-offset-2"> <div class="list-group"> <!--使用指令v-link進行導航--> <router-link to='/home' class="list-group-item" >Home</router-link> <router-link to='/about'a class="list-group-item" >About</router-link> </div> </div> <div class="col-xs-6"> <div class="panel"> <div class="panel-body"> <!--用於渲染匹配的組件--> <router-view></router-view> </div> </div> </div> </div> </div> <template id="home"> <div> <h1>Home</h1> <p>{{msg}}</p> </div> </template> <template id="about"> <div> <h1>About</h1> <p>This is the tutorial about vue-router.</p> </div> </template> </body> <script src="vue.min.js"></script> <script src="vue-router.js"></script> <script> /* 創建組件構造器 */ var Home = Vue.extend({ template: '#home', data: function () { return { msg: 'Hello, vue router!' } } }) var About = Vue.extend({ template: '#about' }) /* 創建路由映射 */ const routes = [{ path: '/home', component: Home }, { path: '/about', component: About }, { path: '/', component: Home }] /* 創建路由器 */ var router = new VueRouter({ routes }) /* 啟動路由 */ const app = new Vue({ router }).$mount('#app') </script> </html>
（1）創建了兩個組件Home 和 about，
/* 創建組件構造器 */
var Home = Vue.extend({
template: '#home',
data: function () {
return {
msg: 'Hello, vue router!'
}
}
})
var About = Vue.extend({
template: '#about'
})
（2）然后創建路由映射的數組，
const routes = [{ path: '/home', component: Home },
{ path: '/about', component: About },
{ path: '/', component: Home }]
(3)把路由配置賦值給vue對象並啟動。
/* 創建路由器 */
var router = new VueRouter({
routes
})
/* 啟動路由 */
const app = new Vue({
router
}).$mount('#app')
最后頁面顯示
實現步驟如下：
執行過程
當用戶點擊router-link指令元素時，我們可以大致猜想一下這中間發生了什么事情：
vue-router首先會去查找router-link指令的路由映射
然后根據路由映射找到匹配的組件
最后將組件渲染到<router-view>標簽
三、嵌套路由和具名路徑我們會放到webpack直接構建項目展示
四、我們接下來用webpack 來建立一個項目
簡單介紹一下webpack：是一個打包工具是個前端管理的一個工具大集合。里面有像vs中nuget和maven的功能，如果不知道這些也沒有關系。直接開始下手練一下就知道了