VueRouter 是Vue.js官方路由插件，与Vue.js深度集成，用于构建单页面应用。构建的单页面是基于路由和组件，路由设定访问路径，将路径与组件进行映射。VueRouter有两中模式 ：hash 和 history ，默认是hash模式。
原理：更新视图不会重新请求页面
hash 和 history 区别：
hash: url中有# ，#和#后面的都是hash，发送http请求后，不会在http中显示#及#后面的
window.location.hash读取
不需要服务器配置
url 中有# 可能不够美观
兼容所有浏览器，包括旧版IE
工作原理：浏览器的hash 部分（window.location.hash）发生变化时，不会触发页面的重新加载。VueRouter 监听hash 的变化并更新视图。
history：没有#，有两个新方法 replaceState() pushState() 可对浏览器历史记录栈进行修改
popState事件监听到状态变更
需要服务器配置来返回应用的HTML文件。因为在刷新页面或直接访问嵌套路由时，服务器需要返回应用的 HTML 文件。
url 更符号用户直觉且美观
仅支持现代浏览器
工作原理： history 模式使用 history.pushState 和 history.replaceState 方法来操作浏览器的历史记录和地址栏。ueRouter 监听这些变化并更新视图。
Vue Router 提供的 $router.push 和 $router.replace 方法，这些方法分别对应 history.pushState 和 history.replaceState。
history.pushState(state, title, url)
添加新记录后，浏览器地址栏立刻显示 localhost:8080/page1，但并不会跳转到 page1，甚至也不会检查page1是否存在，它只是成为浏览历史中的最新记录。切换到其他页面 再点浏览器的回退 会回到page1
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="" />
编程式导航使用的方法：
路由跳转：this.$router.push()
路由替换：this.$router.replace()
后退：this.$router.back()
前进：this.$router.forward()
$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')
跳转导航 <router-link to="" />
路由常用属性：
path 跳转参数
name 命名路由
component 路径对应的组件
children 子路由的配置参数
redirect 重定向路由
active-class
active-class 是VueRouter 中 <router-link >组件的属性，选中样式的切换
引发问题：
由于 to="/" 引起，active-class 选择样式时根据路由中的路径去匹配，然后 显示，
例如在my页面中，路由为localhost:8080/#/my，那么to="/” 和to="/my"都可以匹 配到，都会激活选中样式
解决：
1、在router-link 中写入 exact 首页
2、在路由中加入重定向 首页 { path: '/', redirect: '/home' }
