承接上文

说好了一起懵逼，那么我们继续下沉

在上一篇里已经将vue2.0需要的依赖都装齐了

那么接下来

因为vue最后生成的页面看似静态页面(对于静态页面这里有些偷鸡用法，不管你怎样，反正我已经露出了诡异的微笑?，再贴一个，大爷有兴趣可进去看看演示，开心了就加个星)，其实却是个SPA(单页面应用)

没错！就是一个SPA

作为一个SPA，当然有不同的地方

SPA与传统网页区别的地方是SPA具有前端路由来模拟页面跳转，当然这是众多不同之一，这篇只说前端路由。

上一篇中有安装vue-router组件，这个就是vue的前端路由vue + vue-router简直是爽，页面跳转的速度简直是不要不要的不光是用户体验上的提升，作为一名开发者，在使用了如vue，react等这类MVVM框架后，就不会再想回到jQuery的时代了。

前面搞了半天，现在要开始coding啦！

好的，用自己的小编辑器打开vue项目（我用的是sublime）

可以看到项目目录是这样子的

(插一句，如果喜欢这个sublime主题可以)

与自己的目录对比发现少几个文件，那是没有什么关系的，接下来要做的就是去创建这些文件。

作为一个SPA，首先要有路由

从目录图片里可以看到main.js这个文件，没错这个就是程序的入口

这个文件的内容是这样的

import Vue from 'vue'import router from './router'import App from './App'/* eslint-disable no-new */new Vue({  router,  render: h => h(App)}).$mount('#app')

这里用的是ES6的语法，使用import来导入包这里导入了vue包，还有两个文件，分别是router.js和App.vue.js后缀是可以省略的(毕竟是亲生的，你不说导入什么类型的文件，肯定是自家人毕竟亲呀)其实.vue后缀也是可以省略的，我建议还是写一下，如果遇到两个同名文件就尴尬了。

好的，这个router.js就是路由的输出口啦，

App.vue就是目录里已经存在的那个模板文件啦，你的界面就从这里开始啦。引入了包就可以开始设置路由和挂载模板了

顺带一提，可以看到在new Vue()时传入了一个对象，但是这个对象却不是键值对，

是这样，这是ES6的一种语法，当引用的变量名和键名相同时，就可以简写成这样如果还原来是这样的

new Vue({  router: router,  render: h => h(App)}).$mount('app')// 被简写成了new Vue({  router, // 这是ES6对象的简写，扩展开就是router: router  // 箭头函数(=>)是ES6的新语法  render: h => h(App) // 这里扩展开就是render: (h) => { return h(App) }}).$mount('app')

PS：ES6的新语法现在网上文章已经有很多了，我之后也会发一版常用的语法

那么现在在src目录下创建router.js文件

内容是这样的：

import Vue from 'vue'import VueRouter from 'vue-router'import routes from './routes'// 告诉vue要使用routerVue.use(VueRouter)/* eslint-disable no-new */// 实例化router对象const router = new VueRouter({  mode: 'hash', // 设置路由模式 可选值: "hash" | "history" | "abstract"，默认"hash"  linkActiveClass: 'u-link--Active', // 这是链接激活时的class  // base: '/app/', // 这个是设置根目录路径，一般用不到，默认'/'  routes // 挂载路由集合 后面会说})// 导出router对象export default router

这里引入了两个包vue,vue-router和一个包含路由集合的routes.js文件整个文件的逻辑就是，使用Vue.use()方法告诉vue我们使用了路由然后就大大方方的导出路由对象

这个时候main.js里就可以接受到这里导出的路由对象，并挂载到vue对象上

在src目录下创建routes.js文件

routes.js是用来放置路由集合的文件

其实路由集合是可以写在router.js里的，这里为什么不写在一起呢？因为当路由集合变得庞大时，如果还是写在router.js里，就会显得拥挤，不便于阅读所以这里推荐单独写出来。同时呢也可以创建路由所对应的模板文件(.vue文件，我把它称为模板文件)，Article.vue和Home.vue模板文件叫什么名由自己决定，于是就能看到这张图里所有文件都齐了

那么在编写routes.js文件之前，需要先写好两个模板的内容(不然一会有没有成功都不清楚了，23333)

好的，贴一下home.vue的内容

vue模板是html结构的，这也是对界面编写最友好的方式

里面的<template> </template>标签就是视图<script></script>就是js，这个没有争议<style></style>是写css的，这个也没有问题但是当仔细看我的代码，发现里面html使用了pug，css使用了stylus其实不用他们也是可行的，只是用pug和stylus写结构比较清晰不用也可以的如果要使用，请打开你的终端，给项目添加几个包

npm i pug stylus stylus-loader -D

里面的css的class(.l-ta--c)看着有点懵逼的，可以看看

好的，模板不需要太复杂，只要有字能显示就好了，至于Article.vue也是一样的，这里就不贴了

Tips：模板里推荐有一个根元素，就像这里的.home就是根元素，这样不容易混乱，结构会清晰

写好了模板就可以开始编写routes.js了

先贴代码!

// 导入之前写好的两个模板import Home from './components/Home.vue'import Article from './components/Article.vue'// 编写路由集合const routes = [  {    name: 'Home', // 路由名，这个字段是可选的    path: '/', // 路由路径，这里是根路径所以是'/'    component: Home // 模板  }, // 这些是常用的  {    name: 'Article',    path: '/article',    component: Article  }]// 导出路由集合export default routes

最后导出了路由集合(routes)后就可以在router.js里使用了于是，前面的router.js里的routes就有了。

现在进行最后一步，到App.vue里添加路由

代码如下：

好了，到此为止就完成了路由搭建与使用了。