vue-router之动态路由、懒加载、路由嵌套、传递参数16

动态路由

认识动态路由

动态路由：path与component的匹配关系。

在某些情况下，一个页面的路径是不确定的。如，CSDN用户，进入个人中心页面，每个用户的页面展示内容不同，为了区分开来，页面路径后会带上 /user_id

使用动态路由

以用户为例：

创建User.vue组件


添加路由与User.vue之间的映射

在App.vue中添加User的路由导航。根据路由和User.vue之间的映射关系可知，userId时动态变化的，故to属性要用 v-bind: 或 : 修饰。

效果：

在User页面显示userId。

使用vue路由的$route对象，通过$route拿到当前页面的params获得user_id。

效果

$route与$router的区别

$route：表示当前的路由信息，包含了当前url解析得到的信息。

• $route.params：一个 key/value 对象，包含了 动态片段、全匹配片段。若没有路由参数，则为空。
• ……

$router：全局路由的实例，是router构造方法的实例。

• push等同于pushState（history实现路由之一）
• replace等同于replaceState（一般用来做404页面）
• go

动态路由的懒加载

解析打包文件

打包后的文件分为css和js两个文件夹，css文件被单独分离出去，js文件夹中包含三个js文件，其中：

• app.xxx.js：存放业务代码js代码，即当前开发人员所写的所有代码。
• manifest.xxx.js：为打包的代码做底层支撑，使得浏览器请求到资源后能够将代码效果展示在页面上。
• vendor.xxx.js：存放第三方代码，如Vue、Rect等。

认识路由懒加载

官方解释：

当打包构建应用时，js包会变得很大（不使用路由懒加载则一般都打包在一个js文件当中，而很多页面放在一个js文件中，就会导致该js文件非常大）

影响页面加载速度（一次性向服务器请求所有文件，会花费一定时间，时间过长可能页面会出现短暂空白）

若把不同路由对应的组件分割成不同的代码块，在路由被访问的时候才加载对应的组件，就更加高效。

路由懒加载主要作用

• 路由对应的组件打包成一个个小的js代码块;
• 只在路由被访问到的时候，才加载对应的组件。

路由懒加载的三种方法

1、结合vue异步组件和webpack（现在基本不用了）

模板

const xxx = resolve => {
   
  require.ensure(
    ['../components/xxx.vue']