vue3中路由hash与History的设置

这篇具有很好参考价值的文章主要介绍了vue3中路由hash与History的设置。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

 1、history 关键字:createWebHistory

import { createRouter, createWebHistory } from 'vue-router'
const routes = [ {
  path: '/userinfo',
  name: 'UserInfo',
  component: () => import('../views/UserInfo.vue')
}]
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})
export default router

 history模式直接指向history对象,它表示当前窗口的浏览历史,history对象保存了当前窗口访问过的所有页面网址。URL中没有#,它使用的是传统的路由分发模式,即用户在输入一个URL时,服务器会接收这个请求,并解析这个URL,然后做出相应的逻辑处理。

特点:

当使用history模式时,URL就像这样:hhh.com/user/id。相比hash模式更加好看。

虽然history模式不需要#。但是,它也有自己的缺点,就是在刷新页面的时候,如果没有相应的路由或资源,就会刷出404来。

history api可以分为两大部分,切换历史状态 和 修改历史状态:

修改历史状态:

包括了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法,这两个方法应用于浏览器的历史记录栈,提供了对历史记录进行修改的功能。只是当他们进行修改时,虽然修改了url,但浏览器不会立即向后端发送请求。如果要做到改变url但又不刷新页面的效果,就需要前端用上这两个API。

切换历史状态:

包括forward()、back()、go()三个方法,对应浏览器的前进,后退,跳转操作。

配置:

想要设置成history模式,就要进行以下的配置(后端也要进行配置):

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

2、hash 关键字:createWebHashHistory

import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [{
  path: '/userinfo',
  name: 'UserInfo',
  component: () => import('../views/UserInfo.vue')
}]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
export default router

hash模式是开发中默认的模式,也称作锚点,它的URL带着一个#,例如:www.abc.com/#/vue,它的hash值就是#/vue。

特点:

hash值会出现在URL里面,但是不会出现在HTTP请求中,对后端没有影响。所以改变hash值不会重新加载页面。

这种模式的浏览器支持度很好,低版本的IE浏览器也支持这种模式。

hash路由被称为是前端路由,已经成为SPA(单页面应用)的标配。

 原理:

 hash模式的主要原理就是onhashchange()事件:

window.onhashchange = function(event){
    console.log(event.oldURL, event.newURL);
    let hash = location.hash.slice(1);
}

 使用onhashchange()事件的好处就是,在页面的hash值发生变化时,无需向后端发起请求,window就可以监听事件的改变,并按规则加载相应的代码。除此之外,hash值变化对应的URL都会被浏览器记录下来,这样浏览器就能实现页面的前进和后退。虽然是没有请求后端服务器,但是页面的hash值和对应的URL关联起来了。

 获取页面hash变化的方法:

 文章来源地址https://www.toymoban.com/news/detail-593530.html

// 监听,当路由发生变化的时候执行
watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度观察监听
    deep: true
  }
},

到了这里,关于vue3中路由hash与History的设置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue学习笔记 之 History 路由 和 Hash 路由的区别 及 History 模式时,Nginx的配置方式

    一、History 模式、Hash 模式   Vue Router 是 Vue.js 官方的路由管理器,用于构建单页应用的前端路由。它允许你通过定义路由配置来映射不同的 URL 到对应的组件,实现页面间的跳转和导航。Vue Router 支持两种路由模式:history 模式和 hash 模式。 1、History 模式   在 History 模式

    2024年02月07日
    浏览(34)
  • 路由hash模式改成history模式的前端vue配置与后端配置

    示例项目地址:http://172.00.00.000:8888/Web/static/index.html/index ,其中: /Web/static/ 表示项目部署路径,每个人的路径不一样,vue默认路径是根路径/,如果你项目不是部署在根路径,那就需要修改一些配置 index.html 表示项目入口文件 /index 表示项目首页的路由地址 vue前端配置 1.配置路

    2024年02月15日
    浏览(48)
  • vue3.2项目中使用history路由模式刷新后页面404

    开发过程中,路由可以正常访问,打包后也可以正常访问,但是一刷新页面就会出现404错误 方法一:修改为Hash路由模式 在router/index.ts文件中,将history路由模式修改为hash路由模式即可。 history路由模式: hash路由模式: 方法二、修改后台伪静态 Nginx: Apache: 可以参考下这篇文

    2024年02月11日
    浏览(50)
  • 路由的hash和history模式的区别

    目录 ✅ 路由模式概述 一. 路由的hash和history模式的区别 1. hash模式 2. history模式 3. 两种模式对比 二. 如何获取页面的hash变化 单页应用是在移动互联时代诞生的,它的目标是不刷新整体页面,通过地址栏中的变化来决定内容区域显示什么内容。 要达成这个目标,我们要用到前

    2024年02月14日
    浏览(38)
  • 前端路由hash模式以及history模式详解

    在前后端分离的项目中,前端一般使用 SPA 单页面应用模式来开发项目。那么,什么是 SPA 呢? 单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。 我的理解: 单页面应用就是

    2024年02月10日
    浏览(37)
  • vue3切换路由模式——Hash 、histoary

    1、history模式 使用createWebHistory 2、hash模式 使用createWebHashHistory 综上所述: history 对应 createWebHistory hash 对应 createWebHashHistory

    2024年02月02日
    浏览(45)
  • 解密前端路由: hash模式vs.history模式

    当你构建一个网站时,可能会遇到如何处理 URL 的问题。在URL中,有两种常见的模式: hash模式和history模式 。 1. Hash模式(哈希模式): 在 hash 模式中, URL 中的 hash (即#号后面的部分)用于标记网页的不同部分或状态。当 URL 的 hash 发生改变时,页面不会重新加载,而是通

    2024年02月11日
    浏览(43)
  • Vue3 中 createWebHistory 和 createWebHashHistory 的区别

    Vue3 是目前比较流行的前端框架之一,它提供了很多方便的 API 来帮助我们开发高效、可维护的应用程序。在使用 Vue Router 进行路由管理时,我们可以使用 createWebHistory 和 createWebHashHistory 来创建不同类型的路由模式。本文将介绍这两种模式的区别和如何选择合适的模式。 cre

    2024年02月05日
    浏览(26)
  • Vue history和hash模式

             ~~~~~~~~                 在Vue.js中,路由模式是用来管理应用程序中不同页面之间的导航的机制。Vue Router支持两种常见的路由模式:history模式和hash模式。 History 模式:          ~~~~~~~~                 History模式使用浏览器的history.pushState API 来管理路由。它

    2024年02月12日
    浏览(35)
  • Vue-router中的Hash模式与History模式

    在Vue Router中,Hash模式是一种URL的哈希模式,也被称为锚点模式。在Hash模式下,URL中的哈希部分(即#号后面的内容)会被用作路由的标识符,而不会触发浏览器向服务器发送请求。 Hash模式的URL示例: http://example.com/#/home 在Hash模式下,Vue Router会监听URL中哈希部分的变化,并

    2024年02月15日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包