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的功能，如果不知道这些也没有关系。直接开始下手练一下就知道了