JavaEE
鸿蒙应用开发
HTML&JS+前端
Python+大数据开发
人工智能开发
电商视觉设计
软件测试
新媒体+短视频
集成电路应用开发
C/C++
狂野架构师
IP短视频
vue-router是什么？
更新时间:2022年01月25日15时47分 来源:传智教育 浏览次数:
vue-router的工作原理
vue-router是Vue官方推出的路由管理器，主要用于管理URL，实现URL和组件的对应，以及通过URL进行组件之间的切换，从而使构建单页面应用变得更加简单。这篇文章针对vue-router对应的工作原理进行详细讲解。
单页面应用( SPA)的核心思想之一，就是更新视图而不重新请求页面，简单来说，它在加载页面时，不会加载整个页面，只会更新某个指定的容器中的内容。对于大多数单页面应用，都推荐使用官方支持的 vue-router。
在实现单页面前端路由时，提供了两种方式，分别是hash模式和history模式，根据mode参数来决定采用哪一种方式。
1. hash模式
vue-router默认为hash模式，使用URL的 hash来模拟一个完整的URL，当URL改变时，页面不会重新加载。#就是hash符号，中文名为哈希符或者锚点，在hash符号后的值称为hash值。
路由的hash模式是利用了window可以监听onhashchange事件来实现的，也就是说hash值是用来指导浏览器动作的，对服务器没有影响，HTTP请求中也不会包括hash值，同时每一次改变hash值，都会在浏览器的访问历史中增加一个记录，使用“后退”按钮，就可以回到上一个位置。所以，hash模式是根据hash值来发生改变，根据不同的值，渲染指定DON位置的不同数据。
2. history模式
hash模式的URL中会自带#号，影响URL的美观，而history模式不会出现#号，这利模式充分利用了history.pushState()来完成URL的跳转，而且无须重新加载页面。使用histor模式时，需要在路由规则配置中增加mode:'history'，示例代码如下:
// main.js文件
const router = new Vuerouter({
mode: 'history',
routes: [...]
})
最新资讯
江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2024 All Rights Reserved 苏ICP备16007882号营业执照增值电信业务经营许可证出版物经营许可证
苏公网安备 32132202001156号