2.7路由懒加载

2.7.1什么叫懒加载？

什么叫懒加载？用到时再加载。

路由懒加载的主要作用就是将路由对应的组件打泡成一个个的js代码块.只有在这个路由被访问到的时候,才加载对应的组件。

2.7.2懒加载的方式

项目打包后：

2.8路由的嵌套使用

比如在home页面中,我们希望通过/home/news和/home/message访问一些内容.一个路径映射一个组件，访问这两个路径也会分别渲染两个组件.

2.8.1实现嵌套路由的步骤

（1）创建 对应的子组件，并在路由映射中配置对应的子路由。

（2）在组件内部使用<router-view/>标签。

3、vue-router参数传递

就是在路由跳转的时候需要参数传递。

3.1传递参数的类型

传递参数主要有两种类型: params和query

3.1.1params类型

配置路由格式: /router/:id

传递的方式:在path后面跟上对应的值

传递后形成的路径: /router/123,/router/abc

使用该方式传递参数，只能传递简单的参数。

3.1.2query的类型

配置路由格式:/router,也就是普通配置

传递的方式:对象中使用query的key作为传递方式

传递后形成的路径:/router?id=123,/router?id=abc

运行：

因为query传递的数据是对象类型，所以适合传递大量的参数。

3.1.3$router和$route的区别

3.2全局导航守卫（前置钩子函数）

学习链接:导航守卫 | Vue Router

所谓的导航守卫实际上是指，在URL来回跳转的时候做监听，以便当前URL跳转到其他URL时可 以做一些其他的操作。

3.2.1三个生命周期函数

create()：在创建出组件之后回调该函数

mounted():当template挂载到DOM上的时候回调该函数

update()：当页面发生刷新的时候回调该函数

案例:

每次点击对应的URL时，网页上的标题会显示该URL对应的文字。

因为涉及到路由的跳转，因此需要在router下的index.html下写：

在实际开发中可以判断用户是否登录，登录的话跳转到下一个，没有登录的话跳转到next("/");