什么是路由？
网络页面与页面跳转，实现的都是 标签， 标签里面有属性href，给它定义一个网络地址或者路径的话，它就会帮助你跳转到另外一个页面去。Vue中的路由和我们 标签实现的功能是一样的，我们也是实现的一个对应的跳转，只不过路由的这个性能优化的比较好，你点击 标签的时候，不管你点击多少次，它都会发送一个对应的网络请求，也就是说你的这个页面是会不断地刷新的，也就是说页面会有很多请求。但是路由不一样，只要你点击之后，不会发送请求和页面的刷新，直接就会跳转到它要去的一个位置，它是路由的一个好处。
路由：我的理解是，url的变化。
vue-router中有
官方文档：
https://router.vuejs.org/zh-cn/essentials/getting-started.html
好的博客：
http://www.cnblogs.com/keepfool/p/5690366.html
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。
传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。
示例：
1）单页面应用：
https://keepfool.github.io/vue-tutorials/06.Router/basic/basic_01.html#!/home
https://keepfool.github.io/vue-tutorials/06.Router/basic/basic_01.html#!/about
我们切换，可以看到页面很像没有切换一样，只是上面的:
url的`#!/home`和`#!/about`在切换。
页面的两个组件在切换（Home组件和About组件）。
vue-router安装
- 直接下载和CDN
https://unpkg.com/vue-router/dist/vue-router.js
Unpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像 https://unpkg.com/[email protected]/dist/vue-router.js 这样指定 版本号 或者 Tag。
在 Vue 后面加载 vue-router，它会自动安装的：
- NPM 安装
npm install vue-router --save-dev
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
如果使用全局的 script 标签，则无须如此（手动安装）。
使用路由（vue-router）
1.在工程目录的根目录先安装：
npm install vue-router --save-dev
然后重启：
npm run dev
2.使用vue-router：
在main.js文件中，引入和安装VueRouter：
Vue.use(plugin)是安装插件。只会安装一次。
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3.配置Vue路由：
const router = new VueRouter({
routes: [ # 注意：这里是routes，不是routers
{path: "/", component:Home},
{path: "/helloworld", component:HelloWorld},
]
})
4.使用路由：
new Vue({
router, // 这里来使用
el: '#app',
render: h => h(App),
5.在使用router的Vue实例或者组件的模板的根组件中配置
1）在 标签上面使用 v-link 指令跳转到指定路径。
2）在页面上使用
开始
用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 vue-router 添加进来，我们需要做的是，将组件(components)映射到路由(routes)，然后告诉 vue-router 在哪里渲染它们。下面是个基本例子：
一般使用方式：
我们可以在HTML中，或者javascript中跳转路由：
HTML例子
Hello App!
Go to Foo
Go to Bar
JavaScript例子
// Home.vue
export default {
computed: {
username () {
// 我们很快就会看到 `params` 是什么
return this.$route.params.username
}
},
methods: {
goBack () {
window.history.length > 1
? this.$router.go(-1)
: this.$router.push('/')
}
}
}
编程式导航
一般是传入一个对象，尽管可以传递一个字符串。
const userId = 123
router.push({ name: 'user', params: { userId }}) // -> /user/123 (这里的name是route的name，一般与path写成一样)
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效，正确方式是上面的 { path: `/user/${userId}` }
router.push({ path: '/user', params: { userId }}) // -> /user (这里是错误的)
// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
经验：
https://segmentfault.com/q/1010000013280618?_ea=3335275
需要使用到vue对象的 必然放在main.js 里 比如全局使用的插件 需要使用到Vue.use()
Vue.use(VueRouter) 之后，就可以向Vue实例放入router实例了。
tag属性：可以让
