Vue路由和路由器简介

news/2025/1/12 8:46:47/

前言

路由(route)是vue中非常重要的技术,几乎每一个用vue所写的项目都会用到路由,它是一个vue的插件库,专门实现SPA应用

路由(route)的简介

说到路由,大多数人会想到路由器(router),可以这么说,路由器上的每一个口都是一个路由,对接着一台设备,一个路由器上有多个路由,简单来说就是:

1 路由就是一组key-value的对应关系 key一般是路径,vaule为组件(component)或者函数(function)
2 多个路由,需要经过路由器的管理

在这里插入图片描述

生活中的路由和路由器多用于多台设备上网

编码中的路由和路由器多用于开发SPA应用的导航区和展示区的来回切换

路由的分类

路由分为前端路由和后端路由

简单来说前端路由根据路径就展示对应的组件,后端路由就是根据路径调用指定的路径响应本次的请求

前端路由

理解:value是组件(component),用于展示页面内容

工作过程:当浏览器的路径改变时,对应的组件就会显示

后端路由

理解:value是函数(function),用于处理客户端提交的请求

工作过程:服务器接收到一个请求,根据请求路径找到匹配的函数来处理请求,返回响应数据

SPA应用简单理解

SPA:(single page web application),这种应用一般是单页面进行跳转,进行局部刷新,主要有以下几个特点:

1 单页Web应用

2 整个系统只有一个完整的页面(index.html)

3 点击页面中的导航链接不会刷新页面,只会做页面的局部更新

4 数据需要通过ajax请求获取

在这里插入图片描述

根据点击不同的导航项目,拼接不同的路由,展示不同的组件,由路由器统一进行管理

在这里插入图片描述


http://www.ppmy.cn/news/20694.html

相关文章

【C++】特殊类设计

​🌠 作者:阿亮joy. 🎆专栏:《吃透西嘎嘎》 🎇 座右铭:每个优秀的人都有一段沉默的时光,那段时光是付出了很多努力却得不到结果的日子,我们把它叫做扎根 目录👉设计一个…

Redis 面试题总结

Redis是什么? Redis 是一个 key-value 存储系统,它支持存储的 value 类型相对更多,包括 string、list、set、zset(sorted set --有序集合)和 hash。这些数据结构都支持 push/pop、add/remove 及取交集并集和差集及更丰…

面试_Selenium常见问题

1.selenium 工作原理 1.对于每一条Selenium脚本,一个http请求会被创建并且发送给浏览器的驱动 2.浏览器驱动中包含了一个HTTP Server,用来接收这些http请求 3.HTTP Server接收到请求后根据请求来具体操控对应的浏览器 4.浏览器执行具体的测试步骤 5.浏览…

C++STL入门:string的基本使用小笔记

目录 一.string类简介 二.string类的常用成员接口 1.string类对象的构造函数接口 2. string类对象的容量操作接口 std::string::size std::string::length std::string::empty std::string::clear std::string::resize std::string::reserve 3.string类对象的访问及遍历操作…

网络原理初识

目录 前言: 网络通信 IP地址 端口号 协议 五元组 协议分层 小结: 前言: 互联网可谓是当今世界非常普及的一个名词了。所谓互联网就是通过组网设备把很多台计算机连接在一块。形成一个庞大的局域网LAN或者说广域网WAN(两者…

MAC m1 安装 allure

一、下载安装包,并进行解压 1.1 下载安装包 官网下载包地址 1.2 双击 进行 解压 二、配置环境变量 2.1 打开配置文件 在终端输入以下命令 vi ~/.bash_profile【注意】 该命令地址 注意 中间不要出现多余的空格,否则打开会有问题,这个…

【设计模式】三、面向对象设计原则之单一职责原则

系列文章 【设计模式】一、是什么,为什么,怎么学 【设计模式】二、面向对象设计原则概述 定义-是什么 单一职责原则(Single Responsibility Principle,SRP)是指:所有的对象都应该有单一的职责&#xff0…

【分析向】没有三级缓存会导致什么?

通过上篇(【实践向】当移除了三级缓存…… )的实践,我们得出的结论是:如果不存在代理对象,二级缓存就可以解决循环依赖性的问题,但是当存在代理对象的时候,二级缓存则无法完全解决循环依赖&…