vue重修之路由【上】

文章目录

  • 单页应用程序: SPA - Single Page Application
  • 路由简介
  • Vue Reouter简介
  • VueRouter的使用(5+2)
  • 组件的存放目录问题
    • 组件分类
    • 存放目录
  • 路由的封装抽离

单页应用程序: SPA - Single Page Application

  • 单页面应用(SPA): 所有功能在 一个html页面 上

  • 单页应用程序(SPA)是一种Web应用程序,它通过动态加载所有相关的HTML、CSS和JavaScript资源来实现单个Web页面的呈现和交互。

  • 相比于传统的多页应用程序,SPA的优点在于可以提供更快的用户体验、更快的页面加载速度和更快的响应时间。

  • SPA通常使用JavaScript框架(如Angular、React或Vue.js)来实现动态呈现和交互,并使用AJAX技术来与Web服务器进行通信。

  • SPA的缺点在于对浏览器的性能和内存使用有更高的要求,以及对搜索引擎优化(SEO)的支持不如传统的多页应用程序。
    在这里插入图片描述

  • 单页面应用程序之所以开发效率高、性能好、用户体验好,最大的原因在于它的按需更新机制

  • 在单页面应用程序中,所有的页面都在同一个HTML页面中呈现,页面的更新是通过动态加载组件来实现的。这就需要明确访问路径和组件的对应关系,而路由就是实现这个对应关系的重要机制。

  • 路由可以将不同的URL地址映射到不同的组件,使得用户可以通过URL地址访问到相应的组件。这样可以实现页面的按需加载,减少了页面切换的延迟和带宽开销,提高了用户体验和性能。

  • 同时,路由也可以实现浏览器的前进和后退功能,使得用户可以方便地回到之前访问的页面。

  • 在单页面应用程序中,路由通常由前端框架或库提供,如Vue.js的Vue Router和React的React Router。通过使用路由,开发者可以更加方便地管理应用程序的访问路径和组件对应关系,从而提高开发效率和代码质量。因此,路由是单页面应用程序的重要组成部分,也是实现其高效、高性能、良好用户体验的关键机制之一。

路由简介

在这里插入图片描述

  • Vue中路由可以理解为:路径 和 组件的映射关系
    在这里插入图片描述

  • 在Vue中,使用Vue Router来管理路由,Vue Router会根据路由配置将不同的URL地址映射到对应的组件上,从而实现页面的按需加载。

  • Vue Router的路由配置包括路由路径和组件,路由路径指定了访问该路由对应的URL地址,组件则指定了该路由对应的组件。当用户访问该路由的URL地址时,Vue Router会动态加载该路由对应的组件并在页面中呈现,从而实现页面的按需加载和组件化开发。

  • 例如,假设我们在Vue中需要实现一个路由,访问地址为"/home",对应的组件为Home组件。可以在Vue Router中配置如下路由:

    const routes = [{path: '/home',component: Home}
    ]
    
    • **path指定了访问该路由对应的URL地址为"/home",component指定了该路由对应的组件为Home组件。**当用户访问"/home"的URL地址时,Vue Router就会自动加载Home组件并在页面中呈现。

因此,我们可以将Vue中的路由理解为路径和组件的映射关系,路由的作用是将不同的URL地址映射到不同的组件上,从而实现页面的按需加载和组件化开发。

Vue Reouter简介

说明:Vue 官方的一个路由插件,是一个第三方包,通过组件化的方式定义应用的路由.Vue Router通过监听浏览器的URL变化来动态匹配路由规则,并将路由对应到相应的组件上,从而实现页面的无刷新跳转和局部刷新。
作用:修改地址栏路径时,切换显示匹配的组件

  • Vue Router还支持路由的嵌套、路由参数传递、路由导航守卫等功能,可以满足多种复杂的路由需求。

VueRouter的使用(5+2)

  1. 下载 VueRouter 模块到当前工程,版本3.6.5

    yarn add vue-router@3.6.5
    
  2. main.js中引入VueRouter

    import VueRouter from 'vue-router'
    
  3. 安装注册

    Vue.use(VueRouter)
    
  4. 创建路由对象

    const router = new VueRouter()
    
  5. 注入,将路由对象注入到new Vue实例中,建立关联

    new Vue({render: h => h(App),router:router
    }).$mount('#app')
  • main.js
// 路由的使用步骤 5 + 2
// 5个基础步骤
// 1. 下载 v3.6.5
// yarn add vue-router@3.6.5
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象
// 5. 注入到new Vue中,建立关联import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化const router = new VueRouter()new Vue({render: h => h(App),router
}).$mount('#app')
  • 两个核心步骤
  1. 创建需要的组件 (views目录),配置路由规则

在这里插入图片描述

  1. 配置导航,配置路由出口(路径匹配的组件显示的位置)
    • App.vue
    <div class="footer_wrap"><a href="#/find">发现音乐</a><a href="#/my">我的音乐</a><a href="#/friend">朋友</a>
    </div>
    <div class="top"><router-view></router-view>
    </div>
    

组件的存放目录问题

  • .vue文件 本质无区别

组件分类

  • .vue文件分为2类,都是 .vue文件(本质无区别)
    • 页面组件 (配置路由规则时使用的组件)
    • 复用组件(多个组件中都使用到的组件)
      在这里插入图片描述

存放目录

  • 分类开来的目的就是为了 更易维护
  1. 页面组件 - 页面展示 - 配合路由用 页面组件 配合路由用放在src/views文件夹
  2. 复用组件 - 展示数据 - 常用于复用 复用组件放在src/components文件夹

路由的封装抽离

  • 所有的路由配置都在main.js中不易管理和使用
  • 将路由模块抽离出来。 好处:拆分模块,利于维护
  • 路径简写:脚手架环境下 @指代src目录,可以用于快速引入组件
    在这里插入图片描述

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

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

相关文章

python调用astra进行人脸检测(使用CascadeClassifier)

1、简述 方法&#xff1a;使用opecv中&#xff0c;CascadeClassifier 级联分类器实现人脸检测&#xff0c;CascadeClassifier就是opencv下objdetect模块中用来做目标检测的级联分类器的一个类&#xff0c;它可以帮助我们检测例如车牌、眼睛、人脸等物体。它的大概原理就是判别…

JS类的继承和实现原理详解

一&#xff1a;前言 各位小伙伴在日常开发中&#xff0c;相信一定遇到过Class这种写法。这代表在JS中创建了一个类&#xff0c;并且可以通过这个类去 new 出一个新的对象。其实在JS中&#xff0c;这个类和java中的类是没有区别的&#xff0c;同样具有属性&#xff0c;方法&…

使用vue3前端开发的一些知识点

Vue 3 是一种流行的 JavaScript 框架&#xff0c;用于构建用户界面。它是 Vue.js 框架的第三个主要版本&#xff0c;具有许多新特性和性能改进。下面是 Vue 3 的一些常用语法和概念的详细介绍&#xff1a; 创建 Vue 实例&#xff1a; 在 Vue 3 中&#xff0c;你可以通过创建一个…

前端多媒体处理工具——ffmpeg的使用

写在前面 在前端领域&#xff0c;FFmpeg 是一个非常有用的工具&#xff0c;它提供了多种媒体格式的封装和解封装&#xff0c;包括多种音视频编码、多种协议的流媒体、多种色彩格式转换、多种采样率转换、多种码率切换等。可以在多种操作系统安装使用。 安装 下载FFmpeg 在网…

深入探讨 Golang 中的追加操作

通过实际示例探索 Golang 中的追加操作 简介 在 Golang 编程领域&#xff0c;append 操作是一种多才多艺的工具&#xff0c;使开发人员能够动态扩展切片、数组、文件和字符串。在这篇正式的博客文章中&#xff0c;我们将踏上一段旅程&#xff0c;深入探讨在 Golang 中进行追加…

【VSCode】解决Open in browser无效

问题描述&#xff1a; 在VSCode中无论是点击右键&#xff0c;选择在默认浏览器中打开&#xff0c;还是按快捷键alt b都没有反应。 解决办法&#xff1a; 右击文件 --> 在文件资源管理器中显示 右击文件&#xff0c;选择属性 点击更改 选择用默认浏览器打开 最后 此时…

音乐制作软件 Studio One 6 mac中文版软件特点

Studio One mac是一款专业的音乐制作软件&#xff0c;该软件提供了全面的音频编辑和混音功能&#xff0c;包括录制、编曲、合成、采样等多种工具&#xff0c;可用于制作各种类型的音乐&#xff0c;如流行音乐、电子音乐、摇滚乐等。 Studio One mac软件特点 1. 直观易用的界面&…

Defender Antivirus占用资源怎么禁止

前言 有时Defender Antivirus 突然磁盘IO很高。导致机器卡得很&#xff0c;开发代码很不方便&#xff0c;本文就介绍如何禁用这个服务。 操作 下载Defender Control https://www.sordum.org/9480/defender-control-v2-1/ 这是当前的最新版本。下载不了就用云盘地址 &#x…

Android Studio(2022.3.1)设置阿里云源-新旧版本

新版本 #settings.gradle.ktsmaven { url uri("https://maven.aliyun.com/repository/public/") }maven { url uri("https://maven.aliyun.com/repository/google/") }maven { url uri("https://maven.aliyun.com/repository/jcenter/") }ma…

git commit报错:running pre-commit hook: lint-staged

报错截图&#xff1a; 报错信息&#xff1a; running pre-commit hook: lint-staged 解决方式&#xff1a; 在项目(vue)的package.json文件中&#xff0c;查找 “husky” 部分&#xff0c;并确认其下的 “pre-commit” 钩子是否正确地引用了 lint-staged。 其中配置示例如下&a…

大数据测试用例分析

基于大数据分析&#xff0c;对业务系统产生的日志进行智能分析&#xff0c;能够识别日志中的接口、参数、业务流&#xff0c;并依据分析的结果生成测试用例。 问题与背景 业务复杂 业务系统的复杂性&#xff0c;对测试人员的业务能力提出严格要求&#xff0c;加重测试成本。 …

开源网安受邀参加数字安全高峰论坛,为数字经济发展保驾护航

​10月19日&#xff0c;“提升数字安全技术&#xff0c;护航数字经济发展”高峰论坛在常州创意产业园圆满完成。本次论坛由常州国家高新区管委会、常州市工业和信息化局、常州市大数据管理中心主办&#xff0c;聚焦“数据安全”主题&#xff0c;邀请了超百位专家及企业代表共同…

FROZEN TRANSFORMERS IN LANGUAGE MODELS ARE EFFECTIVE VISUAL ENCODER LAYERS

本文是LLM系列文章&#xff0c;针对《FROZEN TRANSFORMERS IN LANGUAGE MODELS ARE EFFECTIVE VISUAL ENCODER LAYERS》的翻译。 语言模型中的冻结Transformer是有效的视觉编码器层 摘要1 引言2 相关工作3 方法&#xff1a;用于视觉编码的冷冻LLMTransformer4 LLMTransformer在…

5种常用的冲突解决方法

1、撤退/回避&#xff1a;从实际或潜在冲突中退出&#xff0c;将问题推迟到准备充分的时候&#xff0c;或将问题推给其他人员解决&#xff1b; 2、缓和/包容&#xff1a;强调一致而非差异&#xff0c;为维持和谐与关系而退让一步&#xff0c;考虑其他方面的需求&#xff1b; …

华为云HECS服务器下docker可视化(portainer)

一、docker安装 华为云HECS安装docker-CSDN博客 二、portainer安装 portainer地址&#xff1a;Portainer: Docker and Kubernetes Management Platform 当前portainer分CE&#xff08;开源版&#xff09; 和 BE&#xff08;商业版&#xff09;&#xff0c;用CE即可 1 创建…

Vue3开始

1. Vue3简介 2020年9月18日&#xff0c;Vue.js发布版3.0版本&#xff0c;代号&#xff1a;One Piece&#xff08;海贼王&#xff09; 经历了&#xff1a;4800次提交、40个RFC、600次PR、300贡献者 官方发版地址&#xff1a;Release v3.0.0 One Piece vuejs/core 截止2023年…

c++23中的新功能之十七显示this的应用

一、显示this 在前面的文章中分析了显示this(Deducing This),具体的内容请移步《c23新功能之二语法中的Deducing This》&#xff0c;本篇对显示this对实际应用中的一些完善和更新形式进行分析说明&#xff0c;抛砖引玉。 二、CRTP的应用 在前面的学习中&#xff0c;学过CRTP…

ARM映像文件组成

引言 ARM编译器将各种源文件&#xff08;汇编文件、C语言程序文件、C语言程序文件&#xff09;编译生成ELF格式的目标文件&#xff08;后缀为.o文件&#xff0c;以下将目标文件简称为.o文件&#xff09;&#xff0c;.o文件经过连接器&#xff0c;和C/C运行时库一起编译生成ELF格…

如何解决香港服务器使用的常见问题

​  站长们在选择香港服务器租用时会考虑到它的各种性能以及稳定性&#xff0c;这是必须的。但是使用过程中还有些问题也不容忽视&#xff0c;比如&#xff1a;带宽资源是否短缺&#xff0c;是否存在安全漏洞&#xff0c;连接是否正常等这些问题也要考虑到。 香港服务器使用中…

php判断是否是email格式

要判断一个字符串是否是有效的电子邮件地址&#xff0c;你可以使用正则表达式和PHP内置函数来完成。以下是一个示例代码&#xff1a; $email "exampleexample.com"; // 你要检查的电子邮件地址// 使用正则表达式检查电子邮件格式 if (filter_var($email, FILTER_VA…