开始学习Vue(路由)

一、什么是路由

SPA 指的是一个 web 网站只有唯一的一HTML 页面,所有组

件的展示与切换都在这唯一的一个页面内完成。

此时,不同组件之间的切换需要通过前端路由来实现。

结论:在 SPA 项目中,不同功能之间的切换,要赖于前端路由

完成!

二、前端路由的工作方式

用户点击了页面上的路由链接

导致了 URL 地址栏中的 Hash 发生了变化

前端路由监听了到 Hash 地址的变化

前端路由把当前 Hash 地址对应的组件渲染都浏览器中

结论:前端路由,指的是 Hash 地址组件之对应关系

三、路由的使用

①、使用脚手架创建项目,在创建项目中配置路由

②、生成路由文件,文件中有路由的配置

③、在 main.js 中引入路由

④、页面的路由使用

四、路由的两种模式

1. Hash:  url 中带有# (默认)

主要原理是通过监听#后的 URL 路径标识符的更改而触发的浏览器 hashchange 事件,然后通过获取 location.hash 得到当前的路径标

识符,再进行一些路由跳转的操作。

路由:  协议  地址  端口号  锚点

2. History:url 中没有#

路由:  /XXX/XXX

五、路由的三个基本概念

①、route,它是一条路由,由这个英文单词也可以看出来,它是单

②、routes 是一组路由,把上面的每一条路由组合起来,形成一个数组

③、router 是一个机制,相当于一个管理者,它来管理路由

六、路由的传参取参

①、在配置路由时规定传参

routes=[{path: ’/about/:id ’}]

<router-link to= /about/参数 ”>

取参:This.$route.params.id

②、通过?传递参数

routes=[{path: ’/about ’}]

<router-link to= /about/xxx=xxx&xxx=xxx ”>

取参:this.$route.query.xxx

③、类似 get 的传参

:to=  {path: ’/about ’,query: {user: ’aaa ’}} 

this.$route.query.xxx

④、类似 post 的传参

:to=  {name:

‘About ’,path: ’/about ’,query: {user: ’aaa ’}} 

this.$route.query.xxx

地址栏没有数据必须加 name

七、路由的动态添加

> 返回上一页   this.$router.go(-1)

> 跳转指定页  this.$route.push(‘about ’)

八、路由守卫

定义路由时需要添加守卫,也就是要加一些钩子函数。

beforeRouteEnter

beforeRouteLeava

to  到哪里去

form 从哪里来

next 方法   调用后才能下一步

九、子路由

Const  routes=[

{

Path: ’/ ’,

Name: ’Home ’,

Component:Home,

Children:[

{ Path: ’/aaa ’, Name: ’Aaa ’,

                Component:Aaa

}

                ]

        }

]

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

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

相关文章

vue el-date-picker 开始日期不能大于结束日期

HTML <el-form-item label"开始日期" prop"startTime"><el-date-picker clearable v-model"form.startTime" type"date" value-format"yyyy-MM-dd" :picker-options"pickerOptionsStartq" placeholder&q…

CAN总线接头(接线端子)都有哪些种类。

CAN总线是广泛应用在汽车控制和工业自动化控制领域里的现场总线&#xff0c;具有广阔的发展前景。基于CAN总线&#xff0c;工程师们开发出了各种各样的相关设备&#xff0c;比如USBCAN分析仪以及CAN转换网关等等。不知道你是否注意过&#xff0c;这些CAN总线设备的CAN接口都是什…

CUBEMX与FreeRTOS在Arm Compiler 6下的配置方法

在嵌入式开发中&#xff0c;STM32是一种广泛使用的微控制器。为了提高开发效率&#xff0c;我们通常会利用ST公司提供的STM32CubeMX工具来配置硬件&#xff0c;并结合FreeRTOS这一实时操作系统来进行多任务处理。本文将深入探讨如何在这一框架下&#xff0c;使用Arm Compiler 6…

结合Tensuns管理prometheus的blackbox与告警设置

场景说明&#xff1a; 因为业务服务器已经完成了三级等保&#xff0c;禁止在业务服务器上部署任何应用&#xff0c;遂选择一台新的服务器部署prometheus&#xff0c;采用blackbox_exporter监控业务服务器的端口与域名状态。 Tensuns项目介绍 https://github.com/starsliao/T…

链表--24. 两两交换链表中的节点/medium 理解度C

24. 两两交换链表中的节点 1、题目2、题目分析3、复杂度最优解代码示例4、适用场景 1、题目 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&…

forEach()方法跳出循环

forEach方法如何跳出循环_foreach跳出循环-CSDN博客 forEach方法遍历数组&#xff0c;每次遍历都根据条件判断&#xff0c;当条件符合时&#xff0c;就跳出整个遍历&#xff0c;不再继续遍历后面的元素 forEach()方法跳出整个循环遍历 forEach方法一般用抛出异常的方式跳出整…

Python学习之路-Flask项目:博客前台

Python学习之路-Flask项目:博客前台 前言 前一篇完成了项目开发前的所有准备工作&#xff0c;本篇将完成整个博客的前台相关工作。 首页 前言 首页主要为我们提供各个分类入口已经按时间顺序的文章列表和列表排行等数据&#xff0c;是进入博客中第一眼看到的&#xff0c;接…

【JAVA语言-第15话】集合框架(二)——List、ArrayList、LinkedList、Vector集合

目录 List集合 1.1 概述 1.2 特点 1.3 常用方法 1.4 ArrayList集合 1.4.1 概述 1.4.2 练习 1.5 LinkedList集合 1.5.1 概述 1.5.2 特点 1.5.3 常用方法 1.5.4 练习 1.6 Vector类 1.6.1 概述 1.6.2 练习 1.7 List实现类的异同点 List集合 1.1 概述 java.util…

嵌入式培训机构四个月实训课程笔记(完整版)-Linux ARM平台编程第三天-Bootloader编写(物联技术666)

链接&#xff1a;https://pan.baidu.com/s/1KE2cq_kHaRW5HsP29hgL6w?pwd1688 提取码&#xff1a;1688 链接脚本 0. Contents 1. 概论 2. 基本概念 3. 脚本格式 4. 简单例子 5. 简单脚本命令 6. 对符号的赋值 7. SECTIONS命令 8. MEMORY命令 9. PHDRS命令 10. VERS…

函数式接口

文章目录 函数式接口函数式接口当做方法的参数函数式接口作为返回值生产者接口 - Supplier消费者接口 - Consumer使用方式&#xff1a;案例&#xff1a;字符串拆分 判断接口 - Predicate使用方式应用场景 加工接口 - Function 函数式接口 只有一个抽象方法的接口&#xff0c;转…

多旋翼无人机调试问题分析

一、电机和螺旋桨检查 在多旋翼无人机的调试过程中&#xff0c;首先需要检查电机和螺旋桨的状态。电机应转动灵活&#xff0c;无卡滞现象&#xff0c;且无明显磨损。螺旋桨应安装牢固&#xff0c;无松动现象&#xff0c;且桨叶完好无损。若发现问题&#xff0c;应及时更换或维…

(菜鸟自学)漏洞利用——MS11-080

&#xff08;菜鸟自学&#xff09;漏洞利用——MS11-080 漏洞简介利用漏洞对系统进行提权查看漏洞利用代码和工具将py脚本转换为exe程序渗透攻击验证 漏洞简介 MS11-080 是指微软于 2011 年发布的一个安全公告&#xff08;MS11-080&#xff09;&#xff0c;其中包含了关于 Win…

自动化网络故障管理

故障管理是网络管理的组成部分&#xff0c;涉及检测、隔离和解决问题&#xff0c;如果实施得当&#xff0c;网络故障管理可以使连接、应用程序和服务保持在最佳水平&#xff0c;提供容错能力并最大限度地减少停机时间&#xff0c;专门为此目的设计的平台或工具称为故障管理系统…

【并发编程】顺序控制交替输出abc

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;并发编程⛺️稳重求进&#xff0c;晒太阳 必须先2后1打印 用synchronized package aaa;public class Test2 {static Boolean hasExecutorfalse;public static void main(String[] args) …

1 - 搭建Redis数据库服务器|LNP+Redis

搭建Redis数据库服务器&#xff5c;LNPRedis 搭建Redis数据库服务器相关概念Redis介绍安装RedisRedis服务常用管理命令命令set 、 mset 、 get 、 mget命令keys 、 type 、 exists 、 del命令ttl 、 expire 、 move 、 flushdb 、flushall 、save、shutdown 配置文件解析 LNP …

Wordpress seo优化该怎么做?

Wordpress作为开源管理系统&#xff0c;目前已然是世界上最流行的cms之一&#xff0c;这不仅仅因为他开源&#xff0c;对用户友好&#xff0c;让任何人都能轻而易举的制作网站&#xff0c;更是因为这套程序对于搜索引擎非常友好&#xff0c;是做谷歌seo的不二之选 Wordpress作为…

【Ubuntu】systemctl 命令

systemctl 是一个用于检视和控制 systemd 系统和服务管理器的命令行工具。systemd 是用于启动、停止和管理 Linux 系统中的服务的守护进程。以下是一些常用的 systemctl 命令及其说明&#xff1a; systemctl start <unit>: 启动指定的服务单元 systemctl start sshd sy…

【腾讯云服务器】幻兽帕鲁私服服务器部署保姆级教程

在帕鲁的世界&#xff0c;你可以选择与神奇的生物「帕鲁」一同享受悠闲的生活&#xff0c;也可以投身于与偷猎者进行生死搏斗的冒险。帕鲁可以进行战斗、繁殖、协助你做农活&#xff0c;也可以为你在工厂工作。你也可以将它们进行售卖&#xff0c;或分解后食用。 想要部署属于自…

Java入门篇:打造你的Java开发环境——从零开始配置IDEA与Eclipse

引言 “工欲善其事&#xff0c;必先利其器” 作为每一位Java初学者的必经之路&#xff0c;搭建合适的开发环境是至关重要的第一步。本篇将详细指导你如何安装并配置两大主流Java开发工具——IntelliJ IDEA和Eclipse&#xff0c;助你在编程之旅上迈出坚实的第一步。 一、Java开发…

微信小程序分页加载功能,结合后端实现上拉底部加载下一页数据,数据加载中和暂无数据提示

&#x1f935; 作者&#xff1a;coderYYY &#x1f9d1; 个人简介&#xff1a;前端程序媛&#xff0c;目前主攻web前端&#xff0c;后端辅助&#xff0c;其他技术知识也会偶尔分享&#x1f340;欢迎和我一起交流&#xff01;&#x1f680;&#xff08;评论和私信一般会回&#…