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.jsrouter/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 实例,配置了路由模式(可以选择 hashhistory 模式)和路由表,最后导出这个实例。

  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.jsrouter/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.mzph.cn/news/124212.shtml

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

相关文章

【时间复杂度和空间复杂度】

前言&#xff1a; 首先介绍一下算法(Algorithm) 算法是对特定问题求解步骤的一种描述。一个“好”的算法应该达到以下目标&#xff1a;正确性、可读性、健壮性、高效率与低存储量需求 算法的效率的度量 是通过 时间复杂度 和 空间复杂度 来描述的 一、时间复杂度 时间复杂度…

【数据结构】Map和Set

Map和Set 1. 搜索树 1.1 概念 二叉搜索树是左子树比根节点小&#xff0c;右子树比根节点大的二叉树。&#xff08;如果左右子树不为空的话是这样&#xff0c;但是左右子树也可以为空&#xff09; 1.2 操作——查找 查找的思想与二分查找类似。 如果根节点的值和所要查找的…

wangEditor富文本编辑器的使用

文章目录 &#x1f7e2; wangeditor 富文本⭐️安装 wangeditor⭐️demo 模板⭐️效果图 ✒️总结 &#x1f7e2; wangeditor 富文本 一款开源 Web 富文本编辑器&#xff0c;开箱即用&#xff0c;配置简单 wangedito 官网 简洁易用、功能强大、文档教程丰富支持 JS、Vue、Rea…

【Note详细图解】中缀表达式如何转为后缀表达式?数据结构

中缀表达式 中缀表达式&#xff08;中缀记法&#xff09;是一个通用的算术或逻辑公式表示方法&#xff0c;操作符是以中缀形式处于操作数的中间&#xff08;例&#xff1a;3 4&#xff09;&#xff0c;中缀表达式是人们常用的算术表示方法。 前缀或后缀记法不同的是&#xf…

【JVM】类加载器

【JVM】类加载器 文章目录 【JVM】类加载器0. 类加载器概述1. 类加载器的分类1.1 启动类加载器1.2 Java中的默认类加载器1.2.1 扩展类加载器1.2.2 应用程序类加载器 2. 双亲委派机制2.1 类的双亲委派机制是什么&#xff1f;2.2 打破双亲委派机制2.2.1 自定义类加载器2.2.2 线程…

并行和并发有什么区别?

并行和并发 并行和并发最早其实描述的是 Java 并发编程里面的概念。他们强调的是 CPU 处理任务的能力。简单来说&#xff1a; 并发&#xff0c;就是同一个时刻&#xff0c;CPU 能够处理的任务数量&#xff0c;并且对于应用程序来说&#xff0c;不会出现卡顿现象。并行&#x…

【Linux】冯诺依曼体系结构以及初始操作系统

文章目录 冯诺依曼体系结构操作系统概念设计OS的目的定位如何理解管理 总结系统调用和库函数概念 冯诺依曼体系结构 我们常见的计算机&#xff0c;如笔记本。我们不常见的计算机&#xff0c;如服务器&#xff0c;大部分都遵守冯诺依曼体系。 截至目前&#xff0c;我们所认识…

HDFS 基本 shell 操作

HDFS 基本 shell 操作 1.1 创建目录1.2 上传指令1.3 创建空文件1.4 向分布式文件系统中的文件里追加内容1.5 查看指令1.6 下载指令1.7 合并下载1.8 移动hdfs中的文件1.9 复制hdfs中的文件到hdfs的另一个目录1.10 删除命令1.11 查看磁盘利用率和文件大小1.12 修改权限1.13 修改文…

专门解决数学问题的大模型

01 项目介绍 LLEMMA&#xff1a;一个专门解决数学问题的开源大语言模型&#xff0c;能力超过所有已知的开源模型 LLEMMA由多个大学和Eleuther AI公司共同研发&#xff0c;模型能够理解和生成数学表达式、解决数学问题&#xff0c;并与其他计算工具&#xff08;如Python解释器…

修改el-date-picker宽度

<div style"width: 100%"><el-date-pickerstyle"width:100%"v-model"value"type"datetimerange"start-placeholder"开始日期"end-placeholder"结束日期":default-time"[12:00:00]"value-forma…

pytorch 入门 (五)案例三:乳腺癌识别-VGG16实现

本文为&#x1f517;小白入门Pytorch内部限免文章 &#x1f368; 本文为&#x1f517;小白入门Pytorch中的学习记录博客&#x1f366; 参考文章&#xff1a;【小白入门Pytorch】乳腺癌识别&#x1f356; 原作者&#xff1a;K同学啊 在本案例中&#xff0c;我将带大家探索一下深…

Response Header中不暴露Server(IIS)版本、ASP.NET及相关版本等信息

ASP MVC开发的Web默认情况下会在请求的回应中暴露Server、X-AspNet-Version、X-AspNetMvc-Version、X-Powered-By等相关服务端信息&#xff0c;公开这些敏感信息会存在一定的安全风险。 X-SourceFiles标头用于被IIS / IIS Express中某些调试模块理解&#xff0c;它包含到磁盘上…

【Vue】初步认识<script setup>语法糖和组合式 API

▒ 目录 ▒ &#x1f6eb; 导读需求开发环境 1️⃣ &#x1f6eb; 导读 需求 最近写代码的时候&#xff0c;发现<script setup>这样的代码&#xff0c;没见过&#xff0c;好奇&#xff0c;想知道。 所以就有了这篇文章。 很多文章都说setup是vue3的特权。但是&#xff…

Vue图片路径问题(动态引入)

vue项目中我们经常会遇到动态路径的图片无法显示的问题&#xff0c;以下是静态路径和动态路径的常见使用方法。 1.静态路径 在日常的开发中&#xff0c;图片的静态路径通过相对路径和绝对路径的方式引入。 相对路径&#xff1a;以.开头的&#xff0c;例如./、../之类的。就是…

MySQL主从架构

1 主从架构解决了什么问题 随着业务的持续增长&#xff0c;单体数据库满足不了业务的需求&#xff0c;可能会出现负载过重&#xff0c;操作数据库速度变慢的情况。为了解决这个问题&#xff0c;数据库一般采用一主一从、一主多从的架构。 为了操作提高效率&#xff0c;减轻压…

sql在线练习

SQLBolt - 学习 SQL - SQL 简介https://sqlbolt.com/拿走不谢&#xff01;&#xff01;&#xff01; UIUC什么乱七八糟的啊

探讨下前端测试的常见场景

前端测试 场景 这边指的测试是指白盒测试&#xff0c;用代码来测试代码。 测试有利于提升代码质量。 代码功能和需求一致。根据需求&#xff0c;写测试。测试通过了&#xff0c;则表明需求实现了。保证代码重构后&#xff0c;未改坏以前的功能。代码重构后&#xff0c;能通过…

一文告诉你样机是什么,分享几个常用的样机模板

一个项目的诞生通常需要经历头脑构思、绘制设计和最终着陆。在这个过程中&#xff0c;样机制作往往是在着陆实践之前进行的。俗话说&#xff1a;“样机使用得好&#xff0c;草稿过早”。样机设计是产品或网站最终设计的生动、静态和视觉表现。它为用户提供了一种模拟现实的方式…

信息系统项目管理师教程 第四版【第7章-项目立项管理-思维导图】

信息系统项目管理师教程 第四版【第7章-项目立项管理-思维导图】 课本里章节里所有蓝色字体的思维导图

【uniapp】短信验证码输入框

需求是短信验证码需要格子输入框 如图 网上找了一个案例改吧改吧 直接上代码 结构 <template><view class"verify-code"><!-- 输入框 --><input id"input" :value"code" class"input" :focus"isFocus"…