Vue 路由指南：畅游单页应用的地图（Vue Router 和 ＜router-view＞）

在这里插入图片描述

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

  • I. 介绍
    • 理解单页应用程序（SPA）的概念和优势
    • Vue Router 和 `<router-view>` 的作用
  • II. 基本使用
    • 安装和配置 Vue Router
    • 创建路由和定义路由表
    • 在模板中使用 `<router-view>` 来展示匹配的组件

I. 介绍

理解单页应用程序（SPA）的概念和优势

当涉及到Web应用程序时，有两种主要类型：多页应用程序（MPA）和单页应用程序（SPA）。

多页应用程序是传统的Web应用程序形式，每次用户与应用程序交互时，都会从服务器加载一个新的页面。每个页面都是一个完整的HTML文档，包含自己的样式、脚本和内容。用户导航到不同的页面时，整个页面都会重新加载。

相比之下，单页应用程序是在一个页面上构建的应用程序，用户与应用程序交互时，页面不会重新加载。相反，只有应用程序需要的数据和资源会通过异步请求从服务器获取。用户导航切换时，只会动态更新页面的特定部分，其他页面元素保持不变。

单页应用程序的优势包括：

  1. 更快的交互体验
  2. 减少服务器负载
  3. 更好的代码组织和维护
  4. 跨平台能力
  5. 支持离线访问

在这里插入图片描述

总之，单页应用程序通过提供更快的交互体验、减少服务器负载、更好的代码组织和维护、跨平台能力以及离线访问支持等方面，为现代Web应用程序带来了许多优势。作为开发人员，理解SPA的概念和优势可以帮助你做出更好的技术选择和设计决策。

Vue Router 和 <router-view> 的作用

Vue Router 是 Vue.js 官方提供的路由管理器，用于构建单页应用程序（SPA）。它与 Vue.js 框架紧密集成，为应用程序提供了导航和路由功能。

Vue Router 的主要作用是实现应用程序的页面导航和组件路由。它通过基于 URL 的导航来管理不同的视图和组件的展示，并且可以根据用户的交互动作动态更新页面内容。

具体来说，以下是 Vue Router 的主要作用：

  1. 路由映射：Vue Router 允许你在应用程序中定义路由表，将 URL 路径映射到对应的组件。通过路由配置，你可以定义每个 URL 对应的组件展示，并在页面导航时自动加载和渲染相应的组件。

  2. 嵌套路由：Vue Router 支持嵌套路由，使你可以在应用程序中创建层次化的页面结构。通过嵌套路由，你可以在父级路由的组件中使用 <router-view>，从而在同一个页面中展示多个子级路由的内容。

  3. 路由传参：Vue Router 允许你在路由之间传递参数，包括路径参数、查询参数或状态参数。这使得你可以在不同的页面之间传递数据，以便定制化页面展示和功能。

  4. 导航守卫：Vue Router 提供导航守卫功能，允许你在路由切换前后执行逻辑。你可以使用导航守卫来控制路由的访问权限、处理用户授权和验证等操作，以及在路由切换时执行一些额外的异步操作。

  5. 命名视图：Vue Router 支持命名视图，允许在同一个父级路由中使用多个 <router-view> 来展示不同的命名视图。这使得你可以在同一个页面中同时展示不同的组件，实现更灵活的布局和复杂的页面结构。

<router-view> 是 Vue Router 提供的关键组件之一，它的作用是在 Vue 组件中占位，用于渲染匹配的路由组件。当 URL 发生变化时，Vue Router 会根据路由配置找到匹配的组件，并将其渲染到 <router-view> 中显示。

总的来说，Vue Router 在 Vue.js 单页应用程序中提供了强大的路由管理功能，包括路由映射、嵌套路由、路由传参、导航守卫和命名视图等，而 <router-view> 则是用于在组件中呈现不同路由组件的占位符。这些功能使得构建复杂的页面导航和组件路由变得更加简单和高效。

II. 基本使用

安装和配置 Vue Router

要安装和配置 Vue Router，你可以按照以下步骤进行操作：

  1. 安装 Vue Router：在终端中使用 npm 或 yarn 安装 Vue Router。你需要在 Vue 项目的根目录下执行以下命令：

    npm install vue-router
# 或者
yarn add vue-router

  2. 创建路由配置：在你的项目中创建一个新的文件，通常命名为 router.js 或 router/index.js，作为路由配置文件。

    // router.js 或 router/index.jsimport Vue from 'vue';
import VueRouter from 'vue-router';// 导入你的组件
import Home from './views/Home.vue';
import About from './views/About.vue';Vue.use(VueRouter);const routes = [{path: '/',name: 'home',component: Home},{path: '/about',name: 'about',component: About}
];const router = new VueRouter({mode: 'history', // 可以选择 'hash' 或 'history' 模式routes
});export default router;

    上述代码示例中，我们首先导入 Vue 和 VueRouter，并使用 Vue.use() 安装 Vue Router 插件。然后，我们定义了路由表 routes，其中每个路由对象包含 path（路径）、name（名称）和 component（组件）字段。最后，我们创建了一个新的 VueRouter 实例，配置了路由模式（可以选择 hash 或 history 模式）和路由表，最后导出这个实例。

  3. 在主入口文件中使用路由配置：找到你的主入口文件（通常是 main.js），并导入和使用路由配置文件。

    // main.jsimport Vue from 'vue';
import App from './App.vue';
import router from './router';new Vue({router,render: h => h(App)
}).$mount('#app');

    上述代码示例中，我们导入了之前创建的路由配置文件，并将其传递给 Vue 实例的 router 选项。这样，在应用程序中就可以使用 Vue Router 来管理导航和路由。

  4. 在组件中使用 <router-view>：找到需要展示路由组件的组件模板，在合适的位置添加 <router-view> 组件。

    <!-- App.vue 或其他组件模板 --><template><div id="app"><!-- 其他组件内容 --><router-view></router-view></div>
</template>

    <router-view> 组件将用来动态渲染匹配的路由组件，并显示在该位置。

  5. 添加导航链接：在需要的地方添加 <router-link> 组件来创建导航链接。

    <!-- Header.vue 或其他组件模板 --><template><header><nav><router-link to="/">Home</router-link><router-link to="/about">About</router-link></nav></header>
</template>

    <router-link> 组件用于渲染一个 <a> 标签，它会根据配置的 to 属性生成正确的链接，实现路由之间的导航。

  6. 运行应用程序：完成上述步骤后，你就可以运行你的 Vue 应用程序，并使用 Vue Router 来实现页面导航和路由的功能了。

以上是安装和配置 Vue Router 的基本步骤。你可以根据你的项目需求和路由配置进行调整和扩展。详细的 Vue Router 文档可以提供更多配置和功能选项的信息，你可以参考官方文档：Vue Router。

创建路由和定义路由表

要创建路由和定义路由表，你可以按照以下步骤进行操作：

  1. 在你的 Vue 项目中创建一个新的文件，通常命名为 router.js 或 router/index.js，作为路由配置文件。

  2. 导入 Vue、VueRouter，并使用 Vue.use(VueRouter) 安装 Vue Router 插件。确保你已经在项目中安装了 Vue Router。

    // router.js 或 router/index.jsimport Vue from 'vue';
import VueRouter from 'vue-router';Vue.use(VueRouter);

  3. 导入你的组件。根据你的项目结构和需求，将需要用于路由的组件导入到路由配置文件中。

    // router.js 或 router/index.jsimport Home from './views/Home.vue';
import About from './views/About.vue';

  4. 定义路由表 routes。在 routes 数组中，每个路由对象包含 path（路径）、name（名称）和 component（组件）字段。

    // router.js 或 router/index.jsconst routes = [{path: '/',name: 'home',component: Home},{path: '/about',name: 'about',component: About}
];

    在上述示例中，我们定义了两个路由：一个是根路径 / 对应的 Home 组件，另一个是 /about 路径对应的 About 组件。你可以根据你的项目需要定义更多的路由。

  5. 创建一个新的 VueRouter 实例，并将路由表传递给它。你还可以选择路由的模式，可以是 ‘hash’ 模式或 ‘history’ 模式。

    // router.js 或 router/index.jsconst router = new VueRouter({mode: 'history',routes
});

    在这个例子中，我们使用了 ‘history’ 模式，它可以去除 URL 中的 ‘#’ 符号，使 URL 更加友好和语义化。

  6. 导出创建的路由实例，以便在主入口文件中使用。

    // router.js 或 router/index.jsexport default router;

完成以上步骤后，你已经完成了创建路由和定义路由表的过程。你可以根据项目需要添加、修改或删除路由，以及为每个路由指定对应的组件。记得在主入口文件中将路由实例导入并使用，以便在应用程序中启用路由功能。

在你的 Vue 组件中，你可以通过 <router-view> 组件来渲染匹配的路由组件，并使用 <router-link> 组件来创建导航链接。例如，在你的 App.vue 组件中使用 <router-view> 组件：

<!-- App.vue 或其他组件模板 --><template><div id="app"><!-- 其他组件内容 --><router-view></router-view></div>
</template>

这样，根据当前的路由路径，Vue Router 将会将匹配的路由组件渲染到 <router-view> 中进行显示。

你可以根据需要自定义更多的路由配置，例如添加嵌套路由、路由传参和导航守卫等。Vue Router 的文档提供了更详细的配置和功能说明，你可以参考官方文档：Vue Router。

在模板中使用 <router-view> 来展示匹配的组件

在模板中使用 <router-view> 来展示匹配的组件非常简单。只需在你的模板中插入 <router-view> 标签即可。

假设你已经按照之前的步骤创建了路由和定义了路由表，现在让我来说明在模板中如何使用 <router-view>。

<!-- App.vue 或其他组件模板 --><template><div id="app"><!-- 其他组件内容 --><router-view></router-view></div>
</template>

在上面的代码中，我们在模板中插入了 <router-view> 标签。当使用 Vue Router 导航到匹配的路由时，对应路由的组件将会被渲染并显示在 <router-view> 的位置上。

比如，在路由表中定义了 /home 路由对应的组件为 Home，当你访问 /home 路径时，Home 组件将会被渲染并显示在 <router-view> 中。

随着你的路由匹配不同路径时，<router-view> 中的内容会根据当前的路由动态更新，显示对应的组件内容。

需要注意的是，<router-view> 是一个路由视图的插槽，它负责渲染匹配的组件，因此只需要在模板中定义一个即可。你可以根据应用的需要将其放置在合适的位置。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/155358.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

目标检测算法改进系列之添加EIOU,SIOU,AlphaIOU,FocalEIOU等

目标检测算法改进系列之添加EIOU,SIOU,AlphaIOU,FocalEIOU等

YOLOv8添加EIoU,SIoU,AlphaIoU,FocalEIoU,Wise-IoU等 yolov8中box_iou其默认用的是CIoU&#xff0c;其中代码还带有GIoU&#xff0c;DIoU&#xff0c;文件路径&#xff1a;ultralytics/yolo/utils/metrics.py&#xff0c;函数名为&#xff1a;bbox_iou 原始代码 def bbox_i…
阅读更多...
AcWing 第127场周赛 构造矩阵

AcWing 第127场周赛 构造矩阵

构造题目&#xff0c;考虑去除掉最后一行最后一列先进行考虑&#xff0c;假设除了最后一行和最后一列都已经排好了&#xff08;你可以随便排&#xff09;&#xff0c;那么分析知最后一个数字由限制以外其他都已经确定了&#xff0c;无解的情况是k为-1 并且n&#xff0c;m的奇偶…
阅读更多...
Android Button修改背景颜色及实现科技感效果

Android Button修改背景颜色及实现科技感效果

目录 效果展示 实现科技感效果 修改Button背景 结语 效果展示 Android Button修改背景颜色及实现科技感效果效果如下&#xff1a; 实现科技感效果 操作方法如下&#xff1a; 想要创建一个富有科技感的按钮样式时&#xff0c;可以使用 Android 的 Shape Drawable 和 Sele…
阅读更多...
从歌尔股份三季报中，读懂消费电子的“增程式”复苏

从歌尔股份三季报中，读懂消费电子的“增程式”复苏

第三季度财报季前夕&#xff0c;消费电子板块可谓利好不断。 9月&#xff0c;苹果、华为纷纷发布新品&#xff0c;大厂高端机型带动购机热潮重现。同时&#xff0c;Meta推出的MR头显Quest3、智能眼镜Ray-Ban等XR新产品也备受消费者期待&#xff0c;大摩预测Quest 3今年出货量将…
阅读更多...
机器学习-基本知识

机器学习-基本知识

 任务类型 ◼ 有监督学习(Supervised Learning) 每个训练样本x有人为标注的目标t&#xff0c;学习的目标是发现x到t的映射&#xff0c;如分类、回归。 ◼ 无监督学习(Unsupervised Learning) 学习样本没有人为标注&#xff0c;学习的目的是发现数据x本身的分布规律&#xf…
阅读更多...
机泵设备如何通过设备健康管理平台实施预测性维护

机泵设备如何通过设备健康管理平台实施预测性维护

机泵设备在工业生产中起着至关重要的作用&#xff0c;但长时间运行和频繁使用容易引发各种故障。为了提高机泵设备的可靠性和效率&#xff0c;预测性维护成为一种重要的管理策略。设备健康管理平台作为一种先进的工具&#xff0c;为机泵设备的预测性维护提供了有力支持。本文将…
阅读更多...
【C++笔记】C++多态

【C++笔记】C++多态

【C笔记】C多态 一、多态的概念及实现1.1、什么是多态1.2、实现多态的条件1.3、实现继承与接口继承1.4、多态中的析构函数1.5、抽象类 二、多态的实现原理 一、多态的概念及实现 1.1、什么是多态 多态的概念&#xff1a; 在编程语言和类型论中&#xff0c;多态&#xff08;英…
阅读更多...
【Overload游戏引擎细节分析】PBR材质Shader---完结篇

【Overload游戏引擎细节分析】PBR材质Shader---完结篇

PBR基于物理的渲染可以实现更加真实的效果&#xff0c;其Shader值得分析一下。但PBR需要较多的基础知识&#xff0c;不适合不会OpenGL的朋友。 一、PBR理论 PBR指基于物理的渲染&#xff0c;其理论较多&#xff0c;需要的基础知识也较多&#xff0c;我在这就不再写一遍了&…
阅读更多...
四、[mysql]索引优化-1

四、[mysql]索引优化-1

目录 前言一、场景举例1.联合索引第一个字段用范围查询不走索引(分情况&#xff09;2.强制走指定索引3.覆盖索引优化4.in和or在表数据量比较大的情况会走索引&#xff0c;在表记录不多的情况下会选择全表扫描5.like 后% 一般情况都会走索引(索引下推) 二、Mysql如何选择合适的索…
阅读更多...
2023年CCF中国开源大会“大模型时代的智能化软件工程新范式”分论坛成功举行...

2023年CCF中国开源大会“大模型时代的智能化软件工程新范式”分论坛成功举行...

2023年CCF中国开源大会“大模型时代的智能化软件工程新范式”分论坛于10月21日在湖南长沙成功举行。本次论坛聚焦大模型时代的智能化软件新生态以及相应的软件工程新范式&#xff0c;邀请了多位来自学术界和工业界的专家进行分享和交流&#xff0c;共设置了5个主题报告和1个Pan…
阅读更多...
程序进程和预处理

程序进程和预处理

阅读更多...
阿里云服务器双11特惠99元一年云服务器ECS经济型e实例

阿里云服务器双11特惠99元一年云服务器ECS经济型e实例

2023阿里云服务器双11优惠价格99元一年经济型e实例&#xff0c;并且续费不涨价&#xff0c;云服务器ECS-经济型e实例2核2G配置、3M带宽、40G ESSD entry系统盘优惠价99元一年&#xff0c;原价956.64元/年&#xff0c;可用于中小型网站建设、开发测试、小程序或app搭建&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023