Vue从入门到精通-13-Vue-router路由

server/2024/9/23 14:28:34/

什么是路由

后端路由

对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源。

前端输入url请求资源时,服务器会监听到是什么url地址,那后端会返回什么样的资源呢?后端这个处理的过程就是通过路由分发的。

总结:后端路由,就是把所有url地址都对应到服务器的资源,这个对应关系就是路由。

前端路由

对于单页面应用程序来说,主要通过URL中的hash(url地址中的#号)来实现不同页面之间的切换。

同时,hash有一个特点:HTTP请求中不会包含hash相关的内容。所以,单页面程序中的页面跳转主要用hash实现。

总结:在单页应用程序中,这种通过hash改变来切换页面的方式,称作前端路由(区别于后端路由)。

安装Vue-router的两种方式

  • 官方文档:Vue Router | Vue.js 的官方路由

方式一:直接下载文件

下载网址:https://unpkg.com/vue-router/dist/vue-router.js

下载之后,放进项目工程,然后我们在引入vue.js之后,再引入vue-router.js即可:

     <script src="vue2.5.16.js"></script><script src="vue-router3.0.1.js"></script>

然后,我们就可以在 window全局对象中使用 VueRouter这个对象。具体解释可以看接下来的代码中的注释。

注意,只要我们导入了vue-router.js这个包,在浏览器中打开网页时,url后面就会显示#这个符号。

希望各位可以点个赞点个关注,这对up真的很重要,谢谢大家啦!


http://www.ppmy.cn/server/40460.html

相关文章

机器学习理解梯度

一、在机器学习领域&#xff0c;模型的参数是指在训练过程中需要学习的变量&#xff0c;例如神经网络中的权重和偏置。这些参数的调整是通过优化算法来实现的&#xff0c;而梯度是这个优化过程中的关键概念之一。 二、模型参数之间的差异通常不直接称为梯度&#xff0c;而是用…

git 常用命令及注释

一、 常用的git命令 git clone 克隆代码 git log 查看日志 git tag 查看标签 git branch 查看分支 git branch -a 查看远程分支 git pull 拉取 2 初始化配置 git config --global user.name 查看用户名git config --global user.name "serena" …

【机器学习数据可视化-04】Pyecharts数据可视化宝典

一、引言 在大数据和信息爆炸的时代&#xff0c;数据可视化成为了信息传递和展示的关键手段。通过直观的图表和图形&#xff0c;我们能够更好地理解数据&#xff0c;挖掘其背后的信息。Pyecharts&#xff0c;作为一款基于Python的数据可视化库&#xff0c;凭借其丰富的图表类型…

java可变参数

前言 我们虽然能够用重载实现&#xff0c;但多个参数无法弹性匹配 代码 class mycalculator{//下面的四个calculate方法构成了重载//计算2个数的和&#xff0c;3个数的和&#xff0c;4&#xff0c;5&#xff0c;6个数的和// public void calculate(int n1){// System.out.…

day07-缓存套餐

业务逻辑 1. 导入Spring Cache和Redis相关坐标 2. 开启缓存注解功能 3. 用户端添加注解 4. 管理端添加注解 1. 导入Spring Cache和Redis相关坐标 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-cache<…

商务分析方法与工具(五):Python的趣味快捷-文件和文件夹操作自动化

Tips&#xff1a;"分享是快乐的源泉&#x1f4a7;&#xff0c;在我的博客里&#xff0c;不仅有知识的海洋&#x1f30a;&#xff0c;还有满满的正能量加持&#x1f4aa;&#xff0c;快来和我一起分享这份快乐吧&#x1f60a;&#xff01; 喜欢我的博客的话&#xff0c;记得…

Android 巧用putBinder方法传递大文件

使用Intent传递数据大家都知道&#xff0c;但是如果你使用Intent传递大于1Mb的数据时&#xff0c;就一定会报如下的错误&#xff1a; Caused by: android.os.TransactionTooLargeException: data parcel size 1049112 bytes 就是说你的传输数据太大了&#xff0c;当前的大小达…

Git系列:git merge 使用技巧

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…