zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Codeforces Beta Round #92 (Div. 2 Only) B. Permutations 模拟
    POJ 3281 Dining 最大流 Dinic算法
    POJ 2441 Arrange the BUlls 状压DP
    URAL 1152 Faise Mirrors 状压DP 简单题
    URAL 1039 Anniversary Party 树形DP 水题
    URAL 1018 Binary Apple Tree 树形DP 好题 经典
    pytorch中的forward前向传播机制
    .data()与.detach()的区别
    Argparse模块
    pytorch代码调试工具
  • 原文地址:https://www.cnblogs.com/mufc/p/11302803.html
Copyright © 2011-2022 走看看