路由

用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们

起步

动态路由











  职位
  搜索

嵌套路由











 
     职位
     搜索

编程式导航











 
     职位
     搜索

命名路由

意思是用name标示路由




   
   
   



   
      
          职位  //使用名字访问路由
          搜索

命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default




   
   
   



   
      
          职位
          搜索
      
     
        //命名视图  @key

路由组件传参

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

使用 props 将组件和路由解耦

布尔模式




   
   
   Document
   
   
   


   

       职位

对象模式




   
   
   Document
   
   
   


   

       职位

函数模式




   
   
   Document
   
   
   


   

       搜索

导航守卫

导航守卫其实也是路由守卫，也可以是路由拦截，我们可以通过路由拦截，来判断用户是否登录，该页面用户是否有权限浏览，就是拦截器，类似钩子之类的。。。

全局路由守卫有2个

全局前置守卫应用场景：例如判断用户是否登录之类的

全局后置守卫

每个守卫方法接收三个参数：

to: Route: 到哪个页面去

from: Route: 从哪个页面来

next: Function:

next(): 进行管道中的下一个钩子

next(false): 中断当前的导航

next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。

next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。




   
   
   Document
   
   
   



   
       职位
       登录

路由独享守卫

路由独享守卫是在路由配置页面单独给路由配置的一个守卫




   
   
   Document
   
   
   


   

       职位
       登录

组件内守卫




   
   
   Document
   
   
   


   

       职位
       登录

路由元信息

就是可以给路由配置一些参数，例如，哪些路由判断是否登录，哪些路由不判断路由验证




   
   
   Document
   
   
   



   

       职位
       登录

vue-路由

路由

起步