zoukankan      html  css  js  c++  java
  • VueRoute笔记

      1.动态路由匹配

        动态路径参数:使用冒号:标记,参数值会被设置到 this.$route.params

        通配符(*):当使用一个通配符时,$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分

      2.编程式导航

        router.push(location, onComplete?, onAbort?)等同于<route-link to="">,都会向history栈添加一个新的记录,如果提供了 pathparams 会被忽略

        onComplete 导航成功完成 (在所有的异步钩子被解析之后)时调用

        onAbort终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由)时调用

      router.replace(location, onComplete?, onAbort?),跟push很像,但是replace不会向history添加新的记录

      router.go(n)前进或后退多少步

    3.命名视图

      可以在视图中用多个<route-view>,用name属性区分不同的视图,默认为default,在routes的components中设置对应名称的组件

    4.重定向和别名

      重定向: redirect值可以是字符串,可以是命名路由,还可以是方法(目标路由作为参数,返回路径字符串或者路径对象)

      别名:alias

    5.路由组件传参

      (1)布尔模式:如果 props 被设置为 trueroute.params 将会被设置为组件属性。

      (2)对象模式:如果 props 是一个对象,它会被按原样设置为组件属性。当 props 是静态的时候有用。

      (3)函数模式:可以将参数转换成另一种类型,将静态值与基于路由的值结合等等。

    6.导航守卫

      作用:通过跳转或取消的方式守卫导航

      router.beforeEach:全局前置守卫

      router.beforeResolve:全局解析守卫(导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后调用)

      router.afterEach:全局后置钩子

      beforeEnter:路由独享的守卫(写在router.js里)

      beforeRouteEnter:组件内守卫(在渲染该组件的对应路由被 confirm 前调用,不能用this,只能用next(vm=>{}),中的vm

      beforeRouteUpdate组件内守卫在当前路由改变,但是该组件被复用时调用

      beforeRouteLeave:组件内守卫(导航离开该组件的对应路由时调用,通常用来禁止用户在还未保存修改前突然离开,next(false)

        

      7.路由元信息

         routes配置中的每个路由对象为路由记录,路由记录是可以嵌套的,所以,一个路由匹配成功后,他可能匹配多个路由记录。

         一个路由匹配到的所有路由记录会暴露为$route对象的$route.matched数组,可以遍历$route.matched来检查路由记录中的meta字段

        

  • 相关阅读:
    从实验室走向世界:HSP90抑制剂,一种新的癌症药物
    RabbitMQ整合Spring Booot【消费者应答模式】
    RabbitMQ整合Spring Booot【点对点模式】
    Mac删除自带的abc输入法
    Docker搭建Kafka
    IK分词器
    Docker搭建ES集群
    Logstash配置同步mysql到es配置
    ELK分布式日志收集搭建和使用
    Docker安装ES和Kibana
  • 原文地址:https://www.cnblogs.com/allenzhang-920/p/13828214.html
Copyright © 2011-2022 走看看