Vuejs学习笔记--router笔记(2)

1. 懒加载模式

1.1 三种写法

1.2 懒加载应用

1.3 补充：懒加载打包出现map文件问题

map文件作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。所以该文件如果项目不需要是可以去除掉。

解决办法：去src/config/index.js中改一个参数：

productionSourceMap:false 

2. 路由的嵌套使用

2.1 创建子组件

2.2 路由映射中配置子路由

2.3 设置子组件页面占位

2.4 配置子组件的默认路径

3 路由的传递参数

3.1主要有两种方式

3.2 验证query方式

 3.2.1 创建Profile组件

 3.2.2 在router/index.js当中懒加载导入组件

 3.2.3 在index.js中配置路径和组件的映射关系

 3.2.4 配置页面中的router-link标签

 

3.3 普通代码的方式传递参数

4. 导航守卫：作用就是监听路由的进入和离开的

4.1 全局导航守卫

 4.1.1 使用vue-router插件创建的VueRouter路由对象，调用它的beaforEach方法

• 这个方法的参数，是需要传入一个全局导航守卫，也就是NavigationGuard。
• 这个NavigationGuard就是全局导航守卫。它的本质是一个函数。
• 这个函数有三个参数，to，from，next。其中to和from都是route对象，也就是routes当中配置的组件路径关系对象。
• next也是一个函数，必须调用next()才能够跳转正常。

 

4.2 路由嵌套的小问题

上面的图当中，我们打印了一下导航守卫当中的to对象，因为有路由嵌套，所以，我们可以看到to对象当中的meta当中没有title属性，

所以，上面的title显示的是undefined。

我们 matched属性当中去寻找：

 

4.3 有路由嵌套和没有路由嵌套的情况

• 有路由嵌套的时候，从to对象的matched当中拿到第一个数组元素的meta，获取meta当中的title。
• 没有路由嵌套的时候，通过上面的方式，也能够拿到meta当中的title。

5. keep-alive使用

5.1 作用

 5.1.1 可以使被包含的组件保留状态，避免组件频繁的被创建和销毁

• 它们有两个非常重要的属性:
• include - 字符串或正则表达，只有匹配的组件会被缓存
• exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

5.2 使用

keep-alive包裹router-view时，对应所有路径的组件都会被缓存

<keep-alive exclude="Profile,User">   // exclude="Profile,User"   中间不要加空格

   <router-view></router-view>

</keep-alive>

5.3 场景应用（返回的页面处于离开时的路由页面）