介绍
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。
本文是基于上一篇文章（Vue学习笔记进阶篇——vue-cli安装及介绍 ）vue-cli脚手架工具的。
安装
在终端通过cd命令进入到上一篇文章中创建的my-demo1项目目录里，然后使用以下命令进行安装:
npm install vue-router --save–save参数的作用是在我们的包配置文件package.json文件中添加对应的配置。安装成功后， 可以查看package.json文件，你会发现多了”vue-router”: “^2.7.0″的配置。如下：
"dependencies": {
"vue": "^2.3.3",
"vue-router": "^2.7.0"
},
使用
通过以上步骤，我们已经安装好了vue-router，但是在vue-cli中我们如何使用呢？
首先，我们需要在main.js文件中导入并注册vue-router:
//ES6语法导入
import VueRouter from 'vue-router'
//注册
Vue.use(VueRouter)然后便是实例化：
const router = new VueRouter({
mode: 'history',
routes:[
{path: '/', component:DemoHome},
{path: '/about', component:DemoAbout},
{path: '/contact', component:DemoContact}
]})
path: 是路由的路径。
component: 是该路由需要渲染的组件。
上面代码中的DemoHome, DemoAbout, DemoContact都是单文件组件，所以我们同样需要创建上面三个组件，并导入到当前文件。这三个组件我们只是作为示例来使用，所以比较简单，代码分别如下:
DemoHome.vue:
<template>
<div id="home">
<h2>this is home</h2>
</div>
</template><script>
export default({
name:'home'
})
</script>
<style scoped>
#home{
width: 100%;
height: 500px;
background-color: khaki;
}
</style>
DemoAbout.vue:
<template>
<div id="about">
<h2>this is about</h2>
</div>
</template><script>
export default({
name:'about'
})
</script>
<style scoped>
#about{
width: 100%;
height: 500px;
background-color: antiquewhite;
