vue-route 基础

  vue-router 是 vue 官方提供的路由管理器;使用 path-to-regexp 作为路径的匹配引擎,所以支持很多的高级的配置模式;

  vue-router 的模式一共分为: hash、history、abstract 三种;

导航

  vue-router 的导航分为两种模式:声明式导航和编程式导航;

  声明式导航:通过 router-link 进行导航的路由方法;

  编程式导航:通过 router.push 的方法进行导航的路由方法;

    编程式导航的方式:

      1)、router.push('user');

      2)、router.push({path: 'user/1234'});

      3)、router.push({name: 'user', patams: { userId: 1234 }})

      4)、router.push({path: 'user/1234', query: {type: test}})

    在编程式导航中,name 的方法一般只在动态路由中使用;动态路由即定义路由的时候,路径中使用了冒号(“:”)的路径,例如 {name: 'user',path: ' user/:userId '};使用了 name 属性之后就不能再使用 path 了;其实 name 方式是用到了 命名路由的方式;

命名路由

  所谓的命名路由其实就是使用 name 属性在定义路由的时候给路由一个标记,再次使用的使用可以通过使用这个标记进行识别;

命名视图

  有时候我们想对在同级进行展示多个路由组件,但是呢又想有的路右下边展示,有的路由下边不展示,这样用其他的方式去实现的话可能就会比较麻烦,而且可能还会要用到各种的判断,这时候我们就可以采用命名视图的方式就会简单方便一点了,也就是在 <router-vew /> 上添加 name 属性,这样就可以匹配我们在定义 components 下边的名字了,例如:

  {path: 'user', components: { header: Header, container: User, footer: Footer}}

  <router-view class=''header" />  <router-view class=''container" />  <router-view class="Footer" />

  当我们匹配路由的时候,如果定义的 components  中存在 header 就会在 <router-view class=''header" /> 的位置展示 header 属性对应的组件;container 和 footer 同样的;

重定向和别名

  重定向一般是用在路由定义的时候,关键字是 redirect;使用 redirect 的时候可以用三种方式:

    方式一: 用 path 属性进行重定向,例如:{ path: '/a', redirect: '/b'}

    方式二: 用 name 属性进行重定向,例如:{ path: '/a', redirect: {name: 'user' } }

    方式三:用返回函数的方式进行重定向,例如: { path: '/a', redirect: to => { return '/b' } }

  别名的作用是当匹配到这个路由的时候,展示成其他的路由地址名称,关键字是 alias;例如:

    { path:‘/a’, alias: '/b'}

  

导航守卫

  导航守卫主要是进行路由跳转的时候做信息判断等等,主要分为三大类:全局的守卫、组件内的守卫、单独路由组件独享的;

  全局的守卫钩子:router.beforeEach(to, from, next)、router.beforeResolve(to, from, next)(2.5+)、router.afterEach(to, from, next)

  组件内的守卫钩子:beforeRouterEnter、beforeRouterUpdate(2.2+)、beforeRouterLeave

  单独路由独享组件:beforeEnter

  其中,全局的守卫钩子是加在全局的方法上的,组件内的守卫钩子是加载组件内的,单独独享的组件是跟守卫元信息 meta 放在同级的地方的;

  当行被触发之后的解析流程:

    1)、导航被触发;

    2)、在失活的组件里调用离开的守卫 beforeRouterLeave;

    3)、调用全局的 router.beforeEach 守卫;

    4)、在重用的组件里调用 beforeRouterUpDate;

    5)、在路由配置里调用 beforeEnter ;

    6)、解析异步路由组件;

    7)、在被激活的组件里调用 beforeRouteEnter;

    8)、调用全局的 router.beforeResolve 守卫;

    9)、导航被确认;

    10)、调用全局的 afterEach 钩子;

    11)、触发 DOM 更新;

    12)、用创建好的实例调用 router.beforeRouteEnter 守卫中传给 next 的回调函数;

路由元信息

  关键字 meta

原文地址:https://www.cnblogs.com/mufc/p/11302803.html