前端Vue篇之Vue-Router 的懒加载如何实现、如何定义动态路由？如何获取传过来的动态参数？

目录

• Vue-Router 的懒加载如何实现
• • 方案一：箭头函数 + import
  • 方案二：箭头函数 + require
  • 方案三：require.ensure 技术
  • 总结
• 如何定义动态路由？如何获取传过来的动态参数？
• • 定义动态路由
  • 获取传递的动态参数
  • Query方式
  • • 定义路由
    • 跳转方法
    • • 方法1：
      • 方法2：
      • 方法3：
      • 方法4：
      • 方法5：
      • 获取参数
    • 案例需求
    • • 获取传递的动态参数
  • 总结

Vue-Router 的懒加载如何实现

在 Vue Router 中，懒加载可以帮助我们按需加载组件，从而减小初始页面加载时间，提高应用性能。Vue Router 支持使用动态 import 结合 webpack 的代码分割功能来实现懒加载。

下面是几种常见的懒加载实现方式：

方案一：箭头函数 + import

const List = () => import('@/components/list.vue') const router = new VueRouter({ routes: [ { path: '/list', component: List } ] })

• 1
• 2
• 3
• 4
• 5
• 6

• 优点：
  • 语法简洁，直观易懂。
  • 使用箭头函数和动态 import 实现懒加载，符合现代 JavaScript 标准。
• 缺点：
  • 需要构建工具（如 webpack）的支持，以及启用代码分割功能。

方案二：箭头函数 + require

const router = new Router({ routes: [ { path: '/list', component: resolve => require(['@/components/list'], resolve) } ] })

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 优点：
  • 使用箭头函数和 require 实现懒加载，能够按需加载组件。
  • 在一些旧版本的构建工具中仍然比较常见。
• 缺点：
  • 语法相对复杂，不够直观。
  • 依赖于旧版本的模块加载方式，可能在未来的 JavaScript 标准中被逐渐淘汰。

方案三：require.ensure 技术

const List = r => require.ensure([], () => r(require('@/components/list')), 'list'); const router = new Router({ routes: [ { path: '/list', component: List, name: 'list' } ] })

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 优点：
  • 可以实现多个路由指定相同的 chunkName，从而合并打包成一个 js 文件，减少了网络请求。
• 缺点：
  • 使用起来相对复杂，不够直观。
  • require.ensure 在 webpack 2 中已经被废弃，推荐使用动态 import 替代。

总结

• 方案一和方案二都是使用箭头函数结合动态加载的方式，语法相对直观，但是需要构建工具的支持。
• 方案三在一些特定情况下可以实现多个路由合并打包成一个 js 文件，但语法相对复杂，并且在新版本的 webpack 中已经被废弃。

总体来说，方案一是比较推荐的懒加载方式，它直观易懂，符合现代 JavaScript 标准，并且在大多数现代构建工具中都有很好的支持。

如何定义动态路由？如何获取传过来的动态参数？

定义动态路由

在Vue Router中，动态路由允许我们定义路径时使用占位符，这些占位符将会被实际的数值所替代。举例来说，一个动态路由可以是 /user/:id，其中 :id 就是动态的参数。

const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] })

• 1
• 2
• 3
• 4
• 5

在这个例子中，我们定义了一个动态路由 /user/:id，其中 :id 是动态参数，它可以匹配任何值。

获取传递的动态参数

在组件中，可以通过 $route.params 来获取传递过来的动态参数。例如，在 User 组件中，可以这样获取 id 参数：

export default { created() { console.log(this.$route.params.id); } }

• 1
• 2
• 3
• 4
• 5

在上述代码中，this.$route.params.id 就是获取到的动态参数 id 的值。你可以在组件的生命周期钩子函数中（如 created、mounted 等）或者方法中访问这个值。

总之，定义动态路由是通过在路由路径中使用占位符来实现的，而获取传递的动态参数则是通过在组件中使用 $route.params 来获取的。

Query方式

另外一种传递参数的方式是使用 Query 参数。这种方式不会改变 URL 中的路由路径，而是在路径后面以 ? 开头加上键值对的方式传递参数。

定义路由

const router = new VueRouter({ routes: [ { path: '/user', component: User } ] })

• 1
• 2
• 3
• 4
• 5

跳转方法

方法1：

<router-link :to="{ name: 'users', query: { uname: 'james' }}">按钮</router-link>

• 1

方法2：

this.$router.push({ name: 'users', query:{ uname:'james' }})

• 1

方法3：

<router-link :to="{ path: '/user', query: { uname:'james' }}">按钮</router-link>

• 1

方法4：

this.$router.push({ path: '/user', query:{ uname:'james' }})

• 1

方法5：

this.$router.push('/user?uname=james')

• 1

获取参数

通过 $route.query 可以获取传递的值。在 User 组件中，你可以这样获取 Query 参数：

export default { created() { console.log(this.$route.query.uname); } }

• 1
• 2
• 3
• 4
• 5

假设我们正在开发一个社交平台，需要显示每个用户的个人资料页面。这时就需要使用动态路由来实现根据不同用户的ID来展示对应的个人资料页面。

案例需求

我们希望能够通过访问 /user/:id 的方式来展示特定用户的个人资料页面，其中 :id 是动态的，可以匹配任何用户ID。

const router = new VueRouter({ routes: [ { path: '/user/:id', component: UserProfile } ] })

• 1
• 2
• 3
• 4
• 5

1. 在定义路由时，使用 /:id 来表示动态参数。
2. 创建名为 UserProfile 的组件用于展示用户个人资料。
3. 当访问 /user/123 时，会渲染 UserProfile 组件，并且可以通过 $route.params.id 获取到传递过来的动态参数。

获取传递的动态参数

在组件中，可以通过 $route.params 来获取传递过来的动态参数。例如，在 UserProfile 组件中，可以这样获取 id 参数：

export default { created() { console.log(this.$route.params.id); // 根据获取到的 id 请求对应用户的数据并进行页面渲染 } }

• 1
• 2
• 3
• 4
• 5
• 6

• 定义动态路由时，需要使用占位符来表示动态部分，例如 /:id。
• 在组件中，可以通过 $route.params 来获取传递过来的动态参数。

总结

动态路由是Vue Router中非常重要的功能之一，它允许我们根据不同的参数值来展示不同的内容，适用于各种需要根据动态参数展示内容的场景，如个人资料页、商品详情页等。在定义动态路由时，需要注意使用占位符来表示动态部分，并且在组件中可以通过 $route.params 来获取传递过来的动态参数。

持续学习总结记录中，回顾一下上面的内容：
懒加载：在Vue Router中，使用懒加载可以通过import函数和Webpack的代码分割功能来实现。这意味着只有在需要时才会加载相应的组件，而不是一次性加载所有组件。
动态路由：定义动态路由是通过在路径中使用占位符来实现的，比如/user/:id。这样，不同的参数值会匹配到相同的路由，并渲染对应的组件。
获取传递的动态参数：在组件中，可以通过$route.params来获取传递过来的动态参数，例如，在User组件中，可以使用this.$route.params.id来获取传递的ID参数。