Vue(Vue2+Vue3)——62.路由(route)的简介

简介: Vue(Vue2+Vue3)——62.路由(route)的简介

62  路由(route)的简介


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


62.1 什么是路由


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

1 路由就是一组key-value的对应关系 key一般是路径,vaule为组件(component)或者函数(function)

2 多个路由,需要经过路由器的管理

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

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


62.2 路由的分类


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

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


前端路由



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

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


后端路由


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

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


62.3 SPA应用简单理解


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

1 单页Web应用

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

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

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

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

相关文章
|
4天前
|
JavaScript
【vue】 vue2 监听滚动条滚动事件
【vue】 vue2 监听滚动条滚动事件
10 1
|
9天前
vue3【实战】语义化首页布局
vue3【实战】语义化首页布局
28 2
|
9天前
|
存储 容器
vue3【实战】来回拖拽放置图片
vue3【实战】来回拖拽放置图片
19 2
|
9天前
|
JavaScript 开发工具 开发者
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
32 1
|
9天前
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
19 1
|
4天前
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
6 0
|
4天前
|
JavaScript
【vue3】vue3中路由hash与History的设置
【vue3】vue3中路由hash与History的设置
9 0
|
4天前
|
编解码 前端开发
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
11 0
|
4天前
|
JavaScript
【vue】 vue如何根据不同路由地址更改页面的标题
【vue】 vue如何根据不同路由地址更改页面的标题
5 0
|
4天前
|
JavaScript
【vue】 vue中判断路由变化 | 监听路有变化
【vue】 vue中判断路由变化 | 监听路有变化
8 0