Vue Router简单理解

Vue Router简单理解

Vue Router是Vue.js 官方的路由管理器，它和Vue.js的核心深度集成，让构建单页面变得更加的简单主要有三个模块

<router-link>
<router-view>
<router-alive>

导航守卫

导航守卫主要是通过跳转或取消的方式守卫导航

简单点说。导航守卫就是路由跳转过程中的一些钩子函数，路由跳转分为很多小的过程，每一个过程中都有一个函数，这些函数能够让你在某个过程操作一些其他的事情，这就是导航守卫。

路由导航守卫都是在vue实例生命周期钩子函数之前执行的

具体路由守卫的方法

1. 全局前置守卫：
   router.beforeEach，注册如下

   const router = new VueRouter({...})
   router.beforeEach((to,from,next)=>{
       //...
   })
   

   每一个守卫都会接受三个参数：

   to :Router :即将进入的目标路由对象

   from:Router: 当前导航正要离开的路由

   next：函数，必须要调用，，不然的话路由不能跳转过去

   • next() :进入下一个路由
   • next(false) 中断当前的导航
   • next('/') 或 next({path:'/'}) :跳转到其他路由，当前导航被中断，进入新的导航

2. 全局解析守卫

   router.beforeResolve

3. 全局后置后置钩子

   router.afterEach

4. 路由独享守卫

   beforeEnter

   const router = new VueROutrt({
       routers:[
           {
               path:'/foo',
               component:Foo,
               beferEnter:(to,from,next)=>{
                   //...
               }
           }
       ]
   })
   

5. 组件内使用的守卫
   beforeRouterLeave：在失活的组件里调用离开守卫

   beforeRouterUpdate:在重用的组件里调用，比如 <router-view> 的组件

   beforeRouterEnter:在进入对应路由组件创建前调用，注意：这里的不能获取组件实例 this ，因为在守卫执行前组件实例还没有创建

导航守卫的完整流程

• 导航被触发
• 在失活的组件里调用离开守卫：beforeRouterLeave
• 调用全局的 beforeEach 守卫
• 在重用的组件里调用 beforeRouterUpdate守卫
• 在路由配置里调用 beforeEnter 路由独享的守卫
• 解析异步路由组件
• 在被激活的组件里调用 beforeRouterEnter守卫
• 在所有组件内守卫和异步路由组件被解析之后调用全局的 beforeResolve 解析守卫
• 导航被确认
• 调用全局的 afterEach 钩子
• 触发DOM更新
• 用创建好的实例调用 beforeRouterEnter 守卫中传给next的回调函数

router-link

<router-link> 是Vue-Router的内置组件，在具有路由功能的应用中作为申明式的导航使用

实现重定向

第一种方法：

const router = new VueRouter({
    routes:[{
        path: '/a',redirect: '/b'
    }]
})

第二种方法：

const router = new VueRouter({
    routes:[{
        path: '/a',redirect:{name:'b'}
    }]
})

路由的hash模式和history模式

• hash路由: hash模式的原理是hashchange事件，可以在window监听hash的变化，当我们在url后面添加 #xx 时会触发这个事件，vue-router默认使用的就是hash模式，当#后面的hash发生变化时，浏览器不会向服务器发出请求，这样的话也不会发生页面刷新，但是会触发hashchange事件，vue-router就是通过监听hash值的变化来实现更新页面部分内容的对于hash创建的hashHistory对象，当访问不同路由时，会有一下两个步骤

  HashHistory.push会将新路由添加到浏览器访问的历史栈顶，同时HashHistory.replace会替换掉当前栈顶路由

• history路由：

  主要使用HTML5的pushState和replaceState这两个API结合window.popstate事件（监听浏览器前进或者后退)来实现的，pushState可以改变url地址但是不发送请求，replaceState可以读取历史记录栈，还可以对浏览器记录进行修改

• 两者的区别：

  1. pushState设置的url可以是当前同源的url；而hash只可以修改#后面的部分，也就是说只能设置与当前同文档的url
  2. pushState设置的url可以与当前的url一摸一样，这样也可以把记录添加到栈中，但是hash必须与原来的不一样才会添加进去
  3. pushState可以通过stateObject添加任意类型的数据到记录中，但是hash只能添加短字符
  4. pushState可设置额外的title属性供后续使用
  5. history模式需要后端配合将所有访问都实现index.html，否则用户刷新页面会导致404错误