用过vue的程序员都知道，路由是一个项目中必不可少的部分。现今的项目，哪怕再精简，首先登陆注册这是必不可少的，这就离不开路由。

       本人也接触过几个vue的项目，现在就来说说我眼中的路由。首先，从router文件夹说起，它是一个项目路由的根，其它各个分页面的路由都是从这发散出的。举个例子，登陆之后是基本都是用户所看到的的主页面，它基本包含了用户可以使用的所有功能。我们假设用户要使用提现功能，那他就需要进入个人账号页面来进入提现页面完成自己所需要的操作。这里提现页面作为个人账号界面的子路由实现功能。

        所以vue的路由，可以看做一个树，由根发散而出，再由一个个子路由嵌套发散，最终构成整个项目的结构。

       接下来讲讲vue的使用，最基本的应用自然不用说，实现简单页面跳转（指的是不用验证也不用传参），仍然是上面所说的例子，那么当你进入用户的主页面时，是需要判断登录是够成功的，当你进入都提现页面，是需要传递参数来获取你的余额，否则用户怎么知道自己还有多少余额可提现呢。

         接下来就不得不讲到vue的导航守卫了，

          顾名思义，导航守卫，

          主要用来通过跳转或取消的方式守卫导航。  在实际使用中，可以使用 router.beforeEach注册一个前置全局守卫。

const  router  =  new VueRouter({...})

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

      下面来说说这3个参数：

            to：即将进入的目标 -->（路由对象）。

            from：当前导航正要离开的路由。

            next：（Function）必要调用此方法来resolve这个钩子。执行效果依赖next调用的参数：

                           next():进行管道中的下一个钩子，如果全执行完，就是confirmed。

                           next(false)：中断当前导航，如果此时URL改变，则会重置为from后的路由地址。

                           next('/')/next(path:'/');中断当前导航，跳转到一个不同的地址。

                           next(error)：如果参数为一个error实例，则会终止导航。

            如果不调用next()，钩子就不会被resolve。

             接下来就是传参问题：

                  1.直接调用$router.push

               

getRe(id){
//直接调用
     this.$router.push({ 
        path:`/Re/${id}`
})
}

//路由配置如下：
{
     path:'/re/:id',
     name:'/Re'，   
     component：'Re'
}

               2.通过name来匹配路由，params来传递参数

 this.$router.push({
          name: 'Re',
          //传递参数
          params: {
            id: id
          }
 })

//路由配置如下
{
     path: '/re',
     name: 'Re',
     component: Re
}

                3.通过path来匹配路由，query来传递参数

   

 this.$router.push({
          path: '/Re',
          //传递参数
          query: {
            id: id
          }
 })

//路由配置如下
{
     path: '/re',
     name: 'Re',
     component: Re
}

               注：前2中子组件使用$route.params.id来获取参数。

                      第3种采用$route.query.id来获取。