画布 1
  router.beforeEach((to,from,next) => {
console.log(to)
console.log(from)
console.log("这是导航守卫")
if(to.path != "/nav"){
console.log("执行next")
next()
}else{
alert("无法访问")
}
})
    这个函数在页面跳转的时候，自动被执行，这就是导航守卫
    to中的path显示的是当前的路径
    from中的path显示的是跳转到当前路径的之前的路径
    // next控制页面的跳转
  router.beforeResolve((to,from,next) => {
console.log("这是全局解析守卫")
next()
})
    // 这个函数在页面准备要跳转的时候，自动被执行，这就是全局解析守卫，在前置导航守卫后被执行
  router.afterEach(() => {
console.log("跳转完成了")
})
    // 这个函数在页面完成跳转后，自动被执行，因为已经跳转完了，所以不需要next，叫全局后置钩子
  beforeEnter: (to,from,next) => {
console.log("这是路由独享守卫")
next()
}
    // 给特定路由的守卫，如果不加next，则无法跳转到当前页面，在前置导航守卫后被执行
  beforeRouteEnter(to, from, next) {
console.log("组件渲染")
next()
},
    // 在全局解析守卫之前被调用，有独享守卫时在独享守卫后面
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  beforeRouteUpdate(to, from, next) {
console.log("组件复用")
next()
},
    // 在页面第一次被加载时不会被调用，只有当页面跳转但组件不改变时才被调用，在前置导航守卫后面被调用，有独享守卫时在独享守卫前面
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  beforeRouteLeave(to, from, next) {
console.log("组件离开")
next()
}
    // 当跳转页面时组件不被使用时调用，在前置导航守卫前
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  meta:"任意字符串，对象等",
    创建路由的时候添加，自己定义的东西，在路由跳转时用来判断是否允许跳转
  const router = new VueRouter({
mode:"history",
routes
})
    vue-router 中hash模式和history模式。
      在vue的路由配置中有mode选项，最直观的区别就是在url中hash 带了一个很丑的 # ，而history是没有#的。vue默认使用hash。
      hash
        —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。
比如这个 URL：http://www.aaa.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
      history
        —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）
这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
      因此可以说，hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。