1：vue-router
（1）是基于路由和组件的
路由由用于设定访问路径，将路径和组件映射进来。
在vue-router的单页面应用中，页面的路径的改变就是组件的切换。
2：安装
npm install vue-router --save:3使用
3：使用
在模块化工程中使用它，因为它是一个插件，所以可以通过Vue.use)来安装路由功能。
第一步：导入路由对象 并且调用Vue。use（VueRouter）
第二步：创建路由实例，并且传入路由映射配置
第三步：在Vue实例中挂载创建的路由实例
4：实际配置
安装完会多一个文件夹
5：项目实战
1：导入路由
import Vue from 'vue' // 想使用Vue 上边在引入vue
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import App from "../App";
2：通过Vue.use路由对象)
Vue.useRouter)
3：创建路由对象
export default new Router{
// 配置路由和组件的应用关系
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})
4：将Router传入到vue实例中，挂载上
// 在main.js页面挂载
import router from './router'
new Vue{
el: '#app',
router,
components: { App },
template: ''
}
6：子路由（配置路由和组件之间的应用关系）
// 第一步：创建路由组件
import HelloWorld from '@/components/HelloWorld'
// 第二步：引入
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
7：使用路由
通过:
首页
1：该标签是一个vue-router中已经内置的组件，它会被渲染成一个标签.
2： 会根据当前的路径，动态渲染出不同的组件。
如何让默认渲染首页的内容？
routes: [
{
path: '/',
redirect: '/home'
}
]
8：传递参数
9：去掉路径后面#
http://localhost:8081/#/home
默认是hash模式.，怎么改成history？
mode: ‘history’
export default new Router{
routes: [],
mode: 'history'
})
10：router-link 别的属性
首页
tag: 可以指定router-link之后渲染成什么组件，比如上面的代码被渲染成li、
而不是a（默认是a）
replace:不会留下history记录，所以指定replace的情况下，后退键不能返回到上一个页面。
active-class：当路由匹配成功的时候会加一个class。
11：通过点击事件跳转路由。
this.$router.push'/home')
this.$router.replace'/home')