vue-router采用参数传递机制、采用懒载技术以及进行路由嵌套使用

文章目录

• • • • 1.安装一个带路由配置的项目

  • 2.配置一个起步路由

  • 3.修改路由配置的默认值

  • 4. 了解router-link的属性

  • 5. 手写代码模拟实现路由跳转

  • 6. 动态路由

  • • 6.1 路由参数传递(params方式)
    • 6.2 路由参数传递(query方式)

  • 7.懒加载(重点)

  • 8. 嵌套路由

1.安装一个带路由配置的项目

在开始深入探讨 Vue Router 的核心机制之前，首要任务是搭建一个具备完整路由功能的项目环境。通常，我们会使用 Vue CLI 脚手架来初始化项目，并在安装依赖时明确选择包含 Vue Router 的预设，或者手动通过 npm 安装 vue-router 包。这一步骤至关重要，因为它不仅引入了路由库本身，还确保了项目结构能够正确识别并处理路由相关的配置。一个带有路由配置的项目，意味着我们不再仅仅依赖单一的静态页面，而是构建了一个基于 URL 驱动的多视图应用架构。这种架构允许用户通过不同的链接访问不同的内容，而无需重新加载整个页面，从而极大地提升了应用的交互流畅性和用户体验。

![在这里插入图片描述](https://ad.itadn.com/c/weblog/blog-img/