一、概念为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。 前端路由的核心，就在于：改变视图的同时不会向后端发出请求。 为了达到这种目的，浏览器当前提供了以下两种支持：hash——即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。 比如这个 URL：http://www.abc.com/#/hello，h
转载
2024-07-24 07:41:21
282阅读
vue的路由有哈希模式（Hash）与历史模式（History），哈希模式部署到web服务器（Tomcat，Apache、IIS）不需要安装URL重写，如果是历史路由模式，部署到Web服务器上之后要安装URL重写。如果将vue部署到Nginx上，哪怕路由用历史模式，也不需要额外安装URL重写，还可以做负载均衡，方便好用。下面记录下我用Nginx部署VUE项目的经过。安装Nginx【1】安装nginx
转载
2024-03-28 21:00:06
340阅读
...
转载
2021-10-03 19:03:00
262阅读
2评论
路由模式前端路由的核心，就在于 ——— 改变视图的同时不会向后端发出请求。路由有两种模式：hash、history，默认会使用hash模式，在new VueRouter的时候配置mode值可以改变路由模式//创建Router的实例对象
const router = new Router({
mode:"hash",
routes
})hash模式即地址栏url中的#符号，hash的
转载
2024-06-28 19:48:22
179阅读
目录一、前言二、hash模式三、history模式 一、前言对于hash模式和history模式，最直接的区别就是地址栏带不带"#"号了。 vue脚手架搭建的项目的路由默认是hash模式。 hash模式： 创建路由实例时，添加mode:"history"属性，即可使用history模式。const router = new VueRouter({
routes,
mode: "histo
文章目录前言1、React router配置2、nginx 配置参考文档 前言React路由模式分为两种：hashHistory:比如 http://localhost:8080/#/loginbrowserHistory比如 http://localhost:8080/loginbrowserHistory的好处大于hashHistory, 但是麻烦的地方就是，browserHistory路由
转载
2024-04-17 13:32:34
181阅读
Vue的两种路由模式： hash、history；默认是hash模式； 前端路由（改变视图的同时不会向后端发出请求）一、什么是hash模式和history模式？ hash模式：是指url尾巴后的#号以及后面的字符。hash也称为锚点，本身是用来做页面定位的，它可以使对应的id元素显示在可视区域。hash虽然出现在url中，但不会被包括在http请求中，对后端完全没有影响，因此改变hash不会被重
转载
2024-05-17 14:59:35
135阅读
引言： 对于vue这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是vue-router存在的意义。前端路由的核心，就在于——改变视图的同时不会向后端发送请求。为了达到这一目的，浏览器当前提供了一下两种支持： 1.hash（默认）——即地址栏URL中的#符号（此hash不是密码学里的散列运算）。 比如这个URL:http://www.abc.com/#/hello
Vue路由Hash模式分析 Vue-router是Vue的核心组件，主要是作为Vue的路由管理器，Vue-router默认hash模式，即使用URL的Hash来模拟一个完整的URL，当URL改变时页面不会重新加载。 描述 Hash符号即#原本的目的是用来指示URL中指示网页中的位置，例如https:
原创
2022-05-27 19:43:37
1053阅读
Vue的路由机制主要是通过两种模式实现的第一种模式是hash模式第二种是H5的history模式这是默认的hash模式的路由：改成history模式后const router = new VueRouter({
mode:"history",
routes
})
export default routerHash模式hash模式是以url的hash值来作为路由，这也是vue的
转载
2024-06-13 12:05:00
600阅读
前置路由守卫知识全局后置路由守卫router.afterEach((to,from,next)=>{
console.log(to,from,next)
})输出:{name: 'zhuye', meta: {…}, path: '/home', hash: '', query: {…}, …}
{name: null, meta: {…}, path: '/', hash: ''
直观上的区别是：hash模式下history模式下致命区别hash模式下，上线之后不会出现问题。history 模式下，会出现一个致命的BUG，在服务器上面上线之后，点击页面跳转没有问题，但是一旦点击刷新页面会出现404错误,原因是history模式下刷新界面，就等同于向服务器直接请求: www.louhc.com/jichu/123。但是在服务器后端的路径配置中压根就没有 /jichu/123
参考文档（技术博客支持原创作者分享，尊重别人的劳动成果）hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。 比如这个 URL：http://www.abc.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此
当用户直接输入 URL 或刷新页面时，服务器将返回 index.html 文件（应用程序的主页），然后 Vue.js 将根据 URL 加载相应的组件。使用 history 模式需要服务器支持，因为服务器需要被配置为支持这种模式。如果服务器没有配置正确，可能会导致应用程序出现 404 错误页面或其他问题。相比之下
原创
2023-11-04 04:53:41
154阅读
为了构建SPA（单页面应用），Vue引入了前端路由Vue-Router，前端路由的核心就是在改变视图的同
原创
2022-07-12 17:38:06
566阅读
手写Vue-router源码:（hash模式简易版）用户使用Vue.use()时，实际执行了模块中的install方法，而install方法可以接收到Vue的实例,而此时既可以在install方法中为Vue的实例上使用mixin去扩展相应的内容let Vue;
// 创建Vue-Router的类
class MyRouter{
static install(_Vue){
转载
2024-08-06 20:52:29
125阅读
vue-router 中hash模式和history模式。 在vue的路由配置中有mode选项，最直观的区别就是在hash模式下的地址栏里的URL夹杂着‘#’号 ，而history模式下没有。vue默认使用hash。 mode:"hash";mode:"history"; hashhash模式依靠的 ...
转载
2021-10-12 10:44:00
923阅读
2评论
hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用 window.location.hash 读取。特点：hash虽然在U...
原创
2022-03-02 13:43:06
489阅读
hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: 上面的代码可以通过改变hash来改变页面字体颜色，虽然没什么用，但是一定程度上说明了原理。 更关键的一点是，因为hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了，同时点击
原创
2022-07-13 11:14:49
270阅读
