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

  • 相关阅读:
    SSH--1
    oracle---jdbctest--laobai
    oracle---jdbc--laobai
    oracle--知识点汇总2---laobai
    Tomcat_Java Web_内存溢出总结
    单例经典示例
    线程--demo3
    网络通信---示例
    验证码---示例
    java--绘图
  • 原文地址:https://www.cnblogs.com/mufc/p/11302803.html
Copyright © 2011-2022 走看看