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

(未完待续···)

原文地址:https://www.cnblogs.com/lemonmonster/p/9335474.html

时间: 2024-10-01 08:08:03

Vue Router 知识点梳理的相关文章

Vue Router 知识点梳理(二)

1.命名视图:可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口: 1 <router-view class="view one"></router-view> 2 <router-view class="view two" name="a"></router-view> 3 <router-view class="view three" name="b

Vue系列:Vue Router 路由梳理

Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数.查询.通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式,在 IE9 中自动降级 自定义的滚动条行为 1.动态路由 动态路由,可以将某种模式匹配到的所有路由,并全都映射到同个组件. (通俗点,比如根

vue 路由知识点梳理及应用场景整理

最近做项目才发现,我确实对 vue-router 太不熟悉了,都只了解个简单用法就开始搞了,本来很简单的问题,都搞不清楚.现在重新看一遍文档,重新梳理一下. vue 路由的原理 说实话,路由我一直也就光顾着用,没认真思考过这个问题,还是那次人家面试问了这个,我才反应过来是应该好好的了解一下了. 无刷新跳转页面,是单页应用的一大优势,用户体验好,加载速度快,vue 路由的跳转就是无刷新的,它有两种形式,可以在定义路由的时候通过 mode 字段去配置,如果不配置这个字段,那么默认使用的就是 hash

vue router 导入方式

vue router 的路由导入方式可用以下两种: 一:直接导入 import Hello from '@/components/Hello' @是在webpack.base.conf.js 配置: resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src') } } 二 :路由懒加载方式 当打包构建应用时,Javascript包会变得非常大

jquery知识点梳理

jQuery知识点梳理 一.              jquery选择器 基本选择器 ID选择器 类选择器 标记选择器 分组选择器 通配符选择器 层次选择器 $(“ancestor descendent”):祖先后代选择器    空格 $(“parent > child”):父子选择器   大于 $(“prev + next”):相邻后兄弟元素选择器   加号 $(“prev ~ siblings”):所有后兄弟元素选择器  波浪线 过滤选择器:基本过滤选择器 :first.:last.:od

Javascript重要知识点梳理

Javascript重要知识点梳理 说明 Javascript流程控制 js中常用的数据类型 var关键字的使用 if – else if – else switch while for Javascript常用函数 1.  字符串函数 substring indexOf lastIndexOf charAt replace split toLowerCase toUpperCase 2.  数学运算函数 3.  数据类型转换函数 parseInt parseFloat Math.abs Mat

[独孤九剑]Oracle知识点梳理(十)%type与%rowtype及常用函数

本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracle知识点梳理(四)SQL语句之DML和DDL [独孤九剑]Oracle知识点梳理(五)数据库常用对象之Table.View [独孤九剑]Oracle知识点梳理(六)数据库常用对象之Procedure.function.Sequence [独孤九剑]Oracle知识点梳理(七)数据库常用对象之Curs

[独孤九剑]Oracle知识点梳理(七)数据库常用对象之Cursor

本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracle知识点梳理(四)SQL语句之DML和DDL [独孤九剑]Oracle知识点梳理(五)数据库常用对象之Table.View [独孤九剑]Oracle知识点梳理(六)数据库常用对象之Procedure.function.Sequence [独孤九剑]Oracle知识点梳理(八)常见Exception

[独孤九剑]Oracle知识点梳理(八)常见Exception

本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracle知识点梳理(四)SQL语句之DML和DDL [独孤九剑]Oracle知识点梳理(五)数据库常用对象之Table.View [独孤九剑]Oracle知识点梳理(六)数据库常用对象之Procedure.function.Sequence [独孤九剑]Oracle知识点梳理(七)数据库常用对象之Curs