Vue路由和路由器简介

╰+攻爆jí腚メ 2023-09-23 23:08 81阅读 0赞

## 前言 ##

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

## 路由(route)的简介 ##

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

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

![在这里插入图片描述][3cafbe12feaf417ba89137de5eec081b.png]

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

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

## 路由的分类 ##

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

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

### 前端路由 ###

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

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

### 后端路由 ###

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

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

## SPA应用简单理解 ##

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

1 单页Web应用

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

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

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

![在这里插入图片描述][82d2e8d3196640cb8fee9d56827918ec.png]

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

![在这里插入图片描述][fe1f2efe0ba046b9a10a240a92b15f67.png]

[3cafbe12feaf417ba89137de5eec081b.png]: https://img-blog.csdnimg.cn/3cafbe12feaf417ba89137de5eec081b.png
[82d2e8d3196640cb8fee9d56827918ec.png]: https://img-blog.csdnimg.cn/82d2e8d3196640cb8fee9d56827918ec.png
[fe1f2efe0ba046b9a10a240a92b15f67.png]: https://img-blog.csdnimg.cn/fe1f2efe0ba046b9a10a240a92b15f67.png

发表评论取消回复

表情：

评论列表（有 0 条评论，81人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue路由简介【vue-router】

?前言??博客：【无聊大侠hello word】?✍有一点思考，有一点想法，有一点理性！✍✍本文由在下【无聊大侠hello word】原创，首发于CSDN✍一个路由就是一...

淩亂°似流年/ 2024年05月03日 14:33/ 0 赞/ 70 阅读

相关 Vue安装并使用路由和路由器实现页面跳转

前言想要使用路由和路由器实，必须要知道什么是路由和路由器，可以参考这篇文章：[Vue路由和路由器简介][Vue] 下面通过编写代码演示一下如何使用路由和路由器实现页面

红太狼/ 2023年09月23日 23:09/ 0 赞/ 108 阅读

相关 Vue路由和路由器简介

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

╰+攻爆jí腚メ/ 2023年09月23日 23:08/ 0 赞/ 82 阅读

相关华为路由器配置静态路由&默认路由

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0

本是古典何须时尚/ 2023年06月27日 11:23/ 0 赞/ 31 阅读

相关 vue-router，vue路由简介

（一）命名路由命名路由是目前开发当中使用最频繁的形式通过一个名称 name：属性来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候，可以直

女爷i/ 2022年11月04日 01:57/ 0 赞/ 207 阅读

相关 vue 路由、嵌套路由、动态路由

简介路由就是一套映射规则，当url中的哈希值（\hash）改变时，路由会根据制定好的规则，展示对应的视图组件。 vue中的路由路径分为：相对路径（不带 ‘/’，会拼接

朴灿烈づ我的快乐病毒、/ 2022年10月29日 13:28/ 0 赞/ 430 阅读

相关路由功能和路由协议【包括路由器各类介绍、静态路由、ad和metric、负载均衡】

文章目录路由器通过路由表转发数据一、路由表内容二、路由分组转发过程路由器在网络中所扮演的角色路由器说明

谁践踏了优雅/ 2022年10月16日 07:11/ 0 赞/ 259 阅读

相关 Angular2路由器(路由+导航)

这里给大家简单的总结下Angular2路由器相关的一些信息。但是我一向认为最好的文档还是官方文档，还是推荐大家参考官方文档 [https://www.angula

约定不等于承诺〃/ 2022年05月17日 06:58/ 0 赞/ 321 阅读

相关 Vue-路由和Http

安装路由模块在实例化里使用router mode:"history" 复制代码网页http://localhost:8081/没有/\也可以进入

淩亂°似流年/ 2022年01月18日 22:19/ 0 赞/ 167 阅读

相关华为路由器默认路由配置

配置默认路由问题:配置接口IP地址并通过静态路由、默认路由配置实现全网互通。 ![华为路由器默认路由配置][watermark_size_16_text_QDUxQ

我就是我/ 2022年01月15日 06:07/ 0 赞/ 1094 阅读