Vue 路由工作流程 hash 与 history

最新推荐文章于 2022-12-05 20:07:16 发布
最新推荐文章于 2022-12-05 20:07:16 发布
阅读量860 收藏 1
点赞数 1
分类专栏： Vue 技术栈 小狮子前端Vue进阶小册 文章标签： vue js javascript java hash
原则上允许部分内容转载，转载请注明原文章地址！
本文链接：https://blog.csdn.net/weixin_42429718/article/details/104816014
版权

vue-router 工作流程

hash 与 history

vue-router是怎么触发监听事件的呢？

其实就是用到了hash，这里对于前端来说就着重介绍hash了，history记得会有一定兼容性问题。

hash

1、#号后的就是hash的内容
2、可以通过location.hash拿到
3、可以通过onhashchange监听hash的改变

history

1、history即正常的路径
2、可以通过location.pathname拿到
3、可以通过onpopstate监听history的改变

对于hash，我们可以在控制台通过location.hash获取值（如果没有#就获得空字符串），如下所示：

了解本专栏 订阅专栏 解锁全文 超级会员免费看
一百个Chocolate
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
vue-router中的hash和history两种模式的区别
10-18
大家都知道vue-router有两种模式，hash模式和history模式，这里来谈谈vue-router中的hash和history两种模式的区别。感兴趣的朋友一起看看吧
vue路由的主要流程
webpon
10-01 513
vue路由是为了实现前端导航，比如手机微信底部的四个按钮，可以控制页面切换 下面介绍vue路由的基本使用流程: 1、安装vue-router 　　可以在创建项目时选择安装，也可以后面通过npm i vue-router --save来安装 　　 2、在src文件夹下创建vue-router文件夹以及其下面建立index.js文件 　　 3、需要在router新建立的index.js文件中...
vue路由使用流程(手动)
m0_72962890的博客
12-05 403
手动vue路由流程
vue路由使用全流程
m0_67805754的博客
05-15 450
1.下载vue-router模块到当前工程; 2.在main.js中引入VueRouter函数 3.把VueRouter添加到Vue.use(VueRouter)身上,下载VueRouter插件,并注册全局的RouterLink和RouterView组件; 4.配置路由规则数组:路径和组件名一一对应; 5.把路由规则数组赋值一个变量,创建路由对象 6.把路由对象注入到new Vue实例中; 7.用router-view作为挂载点,切换不同的路由组件 相当于是占位符,当用户请求一个路径时,将对应
Vue路由的基础流程
qiutiange1205的专栏
03-15 344
Vue路由基础流程路由就是通过用户点击路由加载对应的组件1. 定义组件2. 定义路由3. 创建Router实例4. 创建Vue挂载Router实例    div id="app"> <h1>My Router</h1> <nav> <!-- 使用router-link组件，在页面中会替换成a标签...
vue-路由History模式
qq_46606159的博客
03-26 294
vue-router默认hash模式——使用URL的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。 如果不想要丑丑的hash，我们可以用路由的hash模式，这种模式充分利用history.pushuState API来完成URL跳转而无需重新加载页面。 const router = new VueRouter({ mode: 'history', // mode: ...
Vue路由history模式解决404问题的几种方法
12-10
但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash模式的话，那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问，如果路由使用 history...
区分vue-router的hash和history模式
10-14
主要介绍了区分vue-router的hash和history模式，帮助大家更好的理解和学习vue路由，感兴趣的朋友可以了解下
Vue下路由History模式打包后页面空白的解决方法
12-09
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面...
vuerouter使用流程,vuerouter使用
纸尿裤排行
09-10 297
前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种方式:1.在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航2.使用H5的window.history功能，使用URL的Hash来模拟一个完整的URL。当打包构建应用时，Javascript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。目录结构先来看看整体的目录结构和流程相关的主要需要关注点的就是compone
vue路由history模式
liuxuanwei1998的博客
07-12 1009
1
Vue-Router源码分析及实现流程梳理
绿足 博客
10-10 453
序言 Web 开发的同学们都知道单页应用如此盛行的年代， 路由在我们的日常开发项目中以成为必不可少的一门功课。目前市面上号称三足鼎立的前端框架 React, Vue， Angular，都会有对应的强大路由支持。 Vue.js 具有性能， 通用，易用，体积，学习成本低等特点。目前比较受到前端同学们的喜爱，其对应的路由Vue-Router 也是设计的简单且功能强大。 本文我们从Vue-Router 源...
Vue Router 路由组件传参
qq_26642611的博客
12-25 301
在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。 使用 props 将组件和路由解耦： 取代与 $route 的耦合 const User = { template: '<div>User {{ $route.params.id }}</div>' } const router = new VueR...
vue-router实现history模式配置
热门推荐
筑释科长的博客
02-09 1万+
一：概述 vue-router可以设置两种模式：hash和history const router = new VueRouter({ mode: "hash", // mode: "history", routes }); 如果使用hash模式，一般无需特殊配置； 但如果要使用history模式，则前端和服务端要做一定的设置； 使用history模式通常本地调试没有什么问题，但是一旦发布到测试或生产环境，则会出现页面白屏或者刷新页面白屏的现象，这种问题的出现是因为前端和服务
vue路由history模式配置
u012716788的专栏
10-21 1573
vue路由history模式刷新页面时出现404问题的两种解决方法 原文地址 本篇文章给大家带来的内容是关于vue路由history模式刷新页面时出现404问题的两种解决方法，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。 vue hash模式下，URL中存在’#’，用’history’模式就能解决这个问题。但是history模式会出现刷新页面后，页面出现404。解决的办法是用nginx配置一下。 在nginx的配置文件中修改 方法一： location /{ root /da
vue路由的两种模式--hash和history
一个憨憨的前端之路
08-24 3136
  大家都知道在vueRouter中，我们可以通过mode来改变路由模式，可选为hash和history。 hash   hash指的是location里面#以及它后面的部分。也被成为锚点，通常用来定位，它的改变不会造成页面的刷新。   我们可以通过window.location.hash来获取当前的hash值。 ** 拓展：url各部分获取 ** hash 设置或返回从井号 (#) 开始的 URL（锚）。 host 设置或返回主机名和当前 URL 的端口号。 hostname 设置或返回当前 URL 的主
vue路由模式及 history 模式下服务端配置
csdn姚宏波
04-28 1万+
前言 vue 项目中，我们比较常用的模式为 hash 和 history 模式 默认情况下，vue 项目采用的就是 hash 模式 有些人对 history 模式下，为什么需要服务器做相应配置，以及如何配置不甚理解，所以这篇文章就对此做出分析，重点是让大家理解，为什么 history 模式下需要服务器做配置 这里会对 hash 模式和 history 模式都做出说明，通过对比，才能更好的理解我们的行为 1. hash 模式 1.1 什么是 hash 模式 先从一个熟悉的锚标记案例开始，帮助大家理解 hash
vue hash原理
WWW_wwwww的博客
06-29 338
<a href="#/">主页</a> <a href="#/index">index</a> <a href="#/home">home</a> <div class="content"></div> <script> cl...
Vue的路由实现：hash模式 和 history模式？
LuckXinXin的博客
03-29 96
答： hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取； 特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。 hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，...
vue路由hash与history区别
最新发布
03-16
Vue路由有两种模式: hash 和 history。 hash 模式使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 history 模式需要服务端配置支持。它使用真实的 URL 路径，当 URL 改变时，页面会重新加载。 总结来说，hash 模式适用于需要前进后退功能的单页应用，而 history 模式则更适用于需要真实 URL 的多页应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

一百个Chocolate

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

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

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

打赏作者

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

抵扣说明：

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

余额充值