VueRouter 是Vue.js官方路由插件，与Vue.js深度集成，用于构建单页面应用。构建的单页面是基于路由和组件，路由设定访问路径，将路径与组件进行映射。VueRouter有两中模式 ：hash 和 history ，默认是hash模式。
原理：更新视图不会重新请求页面
hash 和 history 区别：
hash: url中有# ，#和#后面的都是hash，发送http请求后，不会在http中显示#及#后面的
window.location.hash读取
hash 不会重加载页面
history：没有#，有两个新方法 replaceState() pushState() 可对浏览器历史记录栈进行修改
popState事件监听到状态变更
VueRouter的守卫：
全局守卫 beforeEach
后置守卫 afterEach
路由独享守卫 beforeEnter
全局解析守卫 beforeResolve
VueRouter的钩子函数：
全局 beforeEach
路由独享 beforeEnter
组件内 beforeRouterEnter beforeRouterUpdate beforeRouterLeave
路由传参的方式：
this.router.push({path:'',query:{}}) 接收参数：this.route.query
this.router.push({name:'',params:{}}) 接收参数：this.route.params
<router-link :to="{path:'',query:{}}" />
<router-link :to="{name:'',params:{}}" />
路由跳转方式：
this.$router.push({path:'',query:{}}) 会在history中添加记录，点击回退 返回上一页面
this.$router.push({name:'',params:{}})
this.$router.replace() 不会在history中添加记录，点击回退 返回上上页面
this.$router.go(n) 当n 为正数 向前跳转，为负数 向后跳转
<router-link to="" />
$route 和 $router 区别：
$route 路由信息对象 path query params fullPath hash name等
接收参数this.route.query this.route.params
$router VueRouter的实例 含有很多属性和子对象 如history对象
this.$router.push()
配置路由：
安装路由
npm install--save Vue-Router
引入
import VueRouter from "vue-router"
Vue.use(VueRouter)
配置路由文件
//设置什么路径对应什么组件const routes = [
{path:"/login",component:Login},
{path:"/home",component:Home},
]
// 实例化路由对象
const router = new VueRoute({
routes,
})
// 把路由对象挂载到Vue的根实例
new Vue({
router,
render:h=>h(App)
}).$mount('#app')
放置路由出口 App.vue文件中 <router-view />
跳转导航 <router-link to="" />
路由常用属性：
path 跳转参数
name 命名路由
component 路径对应的组件
children 子路由的配置参数
redirect 重定向路由
active-class
active-class 是VueRouter 中 <router-link >组件的属性，选中样式的切换