zoukankan      html  css  js  c++  java
  • Vue Router 知识点梳理

      1.使用步骤:

        a. 使用模块化机制编程,导入Vue和VueRouter,调用 Vue.use(VueRouter);
        b. 定义 (路由) 组件;
        c. 定义路由routes;
        d. 创建 router 实例,然后传 `routes` 配置;
        e. 创建和挂载根实例。

     2.通过注入路由器,我们可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由;

    3.this.$router 和 router 使用起来完全一样。我们使用 this.$router 的原因是我们并不想在每个独立需要封装路由的组件中都导入路由;

     4.当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用;

    5.复用组件时,想对路由参数的变化作出响应的话,可以简单地 watch (监测变化) $route 对象,或者使用 2.2 中引入的 beforeRouteUpdate 守卫;

    6.有时候,同一个路径可以匹配多个路由,此时,匹配的优先级就按照路由的定义顺序:谁先定义的,谁的优先级就最高;

    7.要在嵌套的出口中渲染组件,需要在 VueRouter 的参数中使用 children 配置;
     
     8.要注意,以 / 开头的嵌套路径会被当作根路径;

    9.当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 <router-link :to="..."> 等同于调用 router.push(...);

    10.路由导航中,如果提供了 pathparams 会被忽略;

    11.如果目的地和当前路由相同,只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2),你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息);

    12.
    router.go(1)的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n);

    13.有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称;

    14.有时候想同时 (同级) 展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar (侧导航) 和 main (主内容) 两个视图,这个时候命名视图就派上用场了;

    15.你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default

    (未完待续···)
  • 相关阅读:
    聊一聊Flutter的setState()
    Flutter + Android 混合开发
    Flutter防止布局溢出
    Flutter获取远程数据 刷新UI界面
    Flutter日常笔记
    POJ 3299 Humidex
    POJ 1207 The 3n + 1 problem
    POJ 1005 I Think I Need a Houseboat
    POJ 1004 Financial Management
    POJ1012
  • 原文地址:https://www.cnblogs.com/lemonmonster/p/9335474.html
Copyright © 2011-2022 走看看