Vue路由和路由器简介

2024-05-10 07:50:28

前言

路由(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请求获取

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

Vue路由和路由器简介相关推荐

vue路由无痕浏览nodeJS环境搭建ElementUI简介
目录一.vue路由&无痕浏览 1. SPA是什么 2. SPA实现思路和技术点 ①技术点 ②思路 3. 通过vue的路由可实现多视图的单页Web应用(基于html的SPA) 4. route ...
vue路由、无痕浏览和nodeJS环境搭建、ElementUI简介
目录 1.vue路由和无痕浏览 1.1.SPA是什么 1.2.SPA实现思路和技术特点 1.2.1.技术特点 1.2.2.思路 1.3.通过vue的路由可实现多视图的单页Web应用 1.4.route ...
vue 传递对象路由_vue 04 -vue路由对象（$route）参数简介以及和router的区别
vue路由对象($route) 在使用了 vue-router 的应用中,路由对象会被注入每个组件中,赋值为 this.$route ,并且当路由切换时,路由对象会被更新. so , 路由对象暴露了以 ...
vue 路由重定向_使用Vue和Vue路由器进行高级路由：重定向和Nav Guard
vue 路由重定向 While the basics of routing in Vue.js have already been covered, today we'll explore some ...
vue路由登录拦截器_Vue路由器
vue路由登录拦截器介绍 (Introduction) In a JavaScript web application, a router is the part that syncs the cu ...
Vue2基础、组件化编程、脚手架、Vuex、Vue路由、UI组件库
尚硅谷张天禹老师讲课学习视频 1.Vue简介 Vue2中文官网 1.1 Vue 介绍一套用于构建用户界面的渐进式JavaScript框架构建用户界面:把数据通过某种办法变成用户界面渐进式:可以 ...
php vue jwt 实战,Vue路由之JWT身份认证的实现方法
一.JWT身份认证简介 JSON Web Token(JWT)是目前最流行的跨域身份验证解决方案,相较于session机制,服务器就不需要保存任何 session 数据了,也就是说,服务器变成无状态了 ...
视频教程-德国Vue.js2终极开发教程（含Vue路由和Vuex）-Vue
德国Vue.js2终极开发教程(含Vue路由和Vuex) * Academind GmbH创始人,当前生活在德国慕尼黑 * 从15岁开始进入开发领域,前后端技术均很精通,毕业于慕尼黑大学硕士学位 * ...
德国Vue.js2终极开发教程（含Vue路由和Vuex）-Max-专题视频课程
德国Vue.js2终极开发教程(含Vue路由和Vuex)-808人已学习课程介绍新手入门现代前端开发的不二选择课程目标: * 学会从简单到复杂企业级应用的VueJS程序编写方法 ...

最新文章

热门文章