持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情

路由信息对象

一个路由对象表示当前激活的路由的状态信息，包含了当前的url解析得到的信息，还有URL匹配到的路由记录

路由对象是不可变的，每次成功的导航后会产生一个新的环境

路由对象出现在多个地方
    在组件内，this.$route
    在$route观察者回调内
    router.match(locaation)的返回值

属性

$route.path
    类型：string
    字符串：对应当前路由的路径，总是解析为绝对路径，如“/foo/bar”

$route.params
    类型：object
    一个key/value对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象
    
$route.query
    类型：object
    一个key/value对象，表示url查询参数，例如，对于路径foo/?user=1，则有$route.query.user==1,如果没有查询值，
返回一个空对象
    
$route.hash
    类型:string
    当前路由的hash值(带#)，如果没有hash值，则为空字符串
    
$route.name
    当前路由的名称，如果有的话
    
$route.redirectedFrom
    如果存在重定向，即为重定向来源的路由的名字
    
$route.matched
    一个数组，包含当前路由的所有嵌套路径片段的路由记录

路由嵌套

const router =new VueRouter({
    routes:[
    //下面的对象就是路由记录
        {
            path:"foo", component:foo,
            children:[
            //这个也是路由记录
                {path:"bar",component:bar}
            ]
        }
    ]
})

导航守卫

概念：路由在进行跳转的时候提供的一些回调函数；vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
有多种机会植入路由导航过程中：全局的，单个路由独享的，或者组件级的

应用：在路由跳转前做一些验证，比如登录验证 vue-router提供的beforeEach可以方便的实现全局导航守卫

解析流程

• 导航被触发
• 在失活的组件里调用离开守卫
• 调用全局的beforeEach守卫
• 在重用的组件里调用beforeRouteUpdata守卫（更新守卫）
• 在路由配置里调用beforeEnter
• 解析异步路由组件
• 在被激活的组件里调用beforeRouterEnter
• 调用全局的beforeResolve
• 导航被确认
• 调用全局的afterEach钩子
• 触发DOM更新
• 用创建好的实例调用beforeRouteEnter守卫传给next的回调函数

全局守卫

router.beforeEach注册一个全局前置守卫
当一个导航被触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行

语法

router.beforeEach((to,from.next)=>{//...})
to:Router:即将要进入的目标 路由对象
from:Router:当前导航正离开的路由
next:function:一定要调用该方法来resolve这个钩子，执行效果依赖next方法调用的参数
    next():进入管道中的下一个钩子，如果全部钩子执行完了，则导航的状态就是确认的
    next(false)：中断当前的导航
    next('/')或者next({path:'/'}):跳转到一个不同的地址
    next(error)：导航终止且该错误被传递给router.onError()注册过的回调
    

后置守卫

全局后置钩子函数，和守卫不同的是，这些钩子函数不会受next的影响，也不会改变导航本身

语法

router.affterEach((to,from)=>{//....})

独享守卫

beforeEnter：单独拦截某一个组件
const router = new VueRouter({ routes [
    {path:'/foo',
     component:foo,
     beforeEnter:((to,from,next)=>{//...})
    }
]});

beforeRouterEnter:在渲染组件时对应的路由被confirm调用，进入该组件时调用
beforeRouterUpdate：路由改变时，但该组件会被重复调用
beforeRouterLeave：离开该组件调用