Vue 路由简介

最新推荐文章于 2022-05-11 21:50:28 发布
最新推荐文章于 2022-05-11 21:50:28 发布
阅读量157 收藏
点赞数 1
分类专栏： Vue 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Seric_xiao/article/details/120481424
版权
本文深入探讨了后端和前端路由的区别与本质。后端路由负责根据用户URL请求返回相应内容，实现URL与服务器资源的对应；而前端路由在SPA（单页面应用）中扮演关键角色，通过Ajax局部更新内容，支持浏览器历史记录，尤其关注用户事件与页面显示的对应。前端路由的核心技术包括URL hash变化监听和事件处理函数的映射。
摘要由CSDN通过智能技术生成

路由是一个比较广义和抽象的概念，路由的本质就是对应关系。

在开发中，路由分为：

  • 后端路由

  • 前端路由

后端路由

  • 概念：根据不同的用户 URL 请求，返回不同的内容

  • 本质：URL 请求地址与服务器资源之间的对应关系

 

SPA（Single Page Application）

  • Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）

  • SPA（Single Page Application）单页面应用程序：整个网站只有一个页面，内 容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作

  • SPA实现原理之一：基于URL地址的hash（hash的变化会导致浏览器记录访问历 史的变化、但是hash的变化不会触发新的URL请求

  • 在实现SPA过程中，最核心的技术点就是前端路由

前端路由

  • 概念：根据不同的用户事件，显示不同的页面内容

  • 本质：用户事件与事件处理函数之间的对应关系

                ​​​​​​​        

 

Seric.
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue路由基本介绍
qq_45335911的博客
08-21 894
1.路由的基本概念与原理 1.1路由 路由是一个比较广义和抽象的概念，路由的本质就是对应关系。 路由分为：前端路由 后端路由 1.后端路由 概念：根据不同用户的URL请求，返回不同的内容 本质：URL请求地址与服务器资源之间的对应关系 （2）.SPA 1.后端渲染(存在性能问题) 2.Ajax前端渲染(前端渲染提高性能，但是不支持浏览器的前进后退操作) 3.SPA(Single Page APPlication)单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实
VueRouter学习笔记
泊一的博客
12-05 517
文章目录1.路由的基本概念与原理1.1 路由1. 后端路由2. SPA（Single Page Application）3.前端路由 1.路由的基本概念与原理 1.1 路由 路由是一个比较广义和抽象的概念，路由的本质就是对应关系。 在开发中，路由分为： 后端路由 前端路由 1. 后端路由 概念：根据不同的用户 URL 请求，返回不同的内容 本质：URL 请求地址与服务器资源之间的对应关系 ...
vue-router学习笔记
weixin_34402408的博客
02-06 172
vue-router安装 方法一： 在vue-cli项目创建时，就会提示是否需要安装vue-router 方法二： 在项目文件夹下使用npm安装 npm install vue-router 方法三：在vue或者html文件中引入vue-router.js <script src="/path/to/vue.js"></...
十、vue-router学习笔记——认识路由、vue-router基本使用、vue-router嵌套路由、vue-router参数传递、vue-router导航守卫、keep-alive
zep
01-31 693
一、认识路由 1.1 什么是路由？ 说起路由你想起了什么？ 路由是一个网络工程里面的术语。 路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动. — 维基百科 额, 啥玩意? 没听懂 在生活中, 我们有没有听说过路由的概念呢? 当然了, 路由器嘛. 路由器是做什么的? 你有想过吗? 路由器提供了两种机制: 路由和转送. 路由是决定数据包从来源到目的地的路径. 转送将输入端的数据转移到合适的输出端. 路由中有一个非常重要的概念叫路由表. 路由表本质上就是一个映射表, 决定了
Vue的路由介绍
weixin_43162418的博客
11-24 146
Vue的路由介绍 route：首先它是个单数，译为路由，即我们可以理解为单个路由或者某一个路由； routes：它是个复数，表示多个的集合才能为复数；即我们可以理解为多个路由的集合，JS中表示多种不同状态的集合的形式只有数组和对象两种，事实上官方定义routes是一个数组；所以我们记住了，routes表示多个数组的集合； router：译为路由器，上面都是路由，这个是路由器，我们可以理解为一个容器包含上述两个或者说它是一个管理者，负责管理上述两个；举个常见的场景的例子：当用户在页面上点击按钮的时
Vue路由demo
08-03
Vue路由（Vue Router）是官方提供的强大路由管理器，它允许我们实现单页面应用（SPA）中的页面导航和状态管理。在Vue项目中，路由扮演着至关重要的角色，它帮助我们定义页面之间的跳转，并处理与这些跳转相关的数据...
详解vue路由
10-15
本文详细介绍了Vue.js框架中的路由管理库vue-...以上就是本文关于Vue路由的详细介绍，涵盖了基本使用到高级特性，通过实例演示了如何在Vue项目中设置和使用路由，帮助开发者理解和掌握vue-router的使用方法和技巧。
vue路由分文件拆分管理详解
01-19
这里说的路由拆分指的是将路由的文件，按照模块拆分，这样方便路由的管理，更主要的是方便多人开发。具体要不要拆分，那就要视你的项目情况来定了，如果项目较小的话，也就一二十个路由，那么是拆分是非常没必要的。...
解决vue路由name同名,路由重复的问题
10-15
总之，解决Vue路由name同名和路由重复的问题，需要开发者在设计路由配置时遵循命名唯一性的原则，并在遇到路由跳转失败时仔细检查路由配置的正确性。通过不断的实践和调试，可以总结出一套适用于自己项目的路由使用...
Vue路由前后端设计总结
10-16
Vue路由的前后端设计涉及前端路由的配置与操作，以及后端服务器对于前端路由的支持。 首先，Vue的路由实现主要依赖于Vue Router库，它允许我们声明式地将URL映射到组件。在前端路由设计中，我们通常会遇到...
Vue-Router基础学习笔记(小结)
10-17
主要介绍了Vue-Router基础学习笔记(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
言简意赅的vue路由简介
weixin_46474841的博客
05-11 371
路由 路由：就是一一对应关系的集合。 文章目录路由前端路由工作原理一、路由-官方路由基本使用步骤二、声明式导航-router-link1. Router-link组件介绍vue路由传参的方式图示-查询字符串![在这里插入图片描述](https://img-blog.csdnimg.cn/987e05d170b943fc93bb031b5cbe71e5.png)图示-params传参vue路由接收参数路由-重定向配置路由路由404三、编程式导航vue路由接收参数三、路由嵌套总结 前端路由工作原理 前端
vue-router 学习笔记
qq_35437531的博客
11-29 299
安装 npm install vue-router --save 起步 Javascript:  import vue from 'vue'; import vueRouter from 'vue-router'; vue.use(vueRouter); var routes=new vueRouter({ routes:[ { pat...
vue-router 学习笔记（基本内容）
Siny_YN的博客
05-31 732
1.带参数路由routers:[ {path:'/user/:id',name:'user',component:User} ]使用参数：$router.params.id2.两个路由都渲染同个组件复用组件时，想对路由参数的变化作出响应，watch (监测变化) watch{ 'route'(to,from){ } }或者使用beforeRouteUpdate （目标路由和当前路由相同，只是...
VueRouter 学习笔记
Lu. saning
06-17 121
一、介绍 Vue 中的页面都是SPA(单页面应用), 页面之间的跳转实际上只是更改了页面的内容，页面的地址是没有变化的，而这一需求标签不能实现，于是推出 VueRouter, 他让我们实现页面的切换就变得易如反掌 单页面应用：所有的页面最终都打包集合成一个vue界面，这样的好处是不用切换url地址就能改变当前页面内容，坏处是第一次加载会慢一点 二、环境搭建&简单使用 1. 安装vue-router依赖包 npm install vue-router --save-dev 2. 导入vu.
Vue Router学习笔记
牧之的博客
09-16 347
https://www.cnblogs.com/xxr0218/p/13534571.html 其中index.js import Vue from 'vue' import VueRouter from 'vue-router' import HelloWWorld from '../src/components/HelloWorld.vue' Vue.use(VueRouter) export default new VueRouter({ routes: [{ path: '/', nam
vue的路由的简介
weixin_45816830的博客
04-14 584
一、要区分后端路由与前端路由 后端路由：应用程序如何去处理不同的url地址发送过来的请求。 POST localhost:3000/api/login GET localhost:3000/list 前端路由：不同的url地址要渲染不同的页面效果出来 1.1 GET localhost:8080/index.html 1.2 GET localhos...
Vue路由简介
我的博客
09-27 129
什么是路由 1.后端路由：对于普通的网站，所有的超链接都是url地址，所有的url地址都对应服务器上对应的资源 2.前端路由：对于单页面应用程序，主要通过url中的hash(#号)来实现不同页面之间的切换 hash的特点：HTTP请求中不会包括hash相关的内容 在单页面应用程序中，通过hash来切换页面的方式，叫做前端路由 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Seric.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值