vue3中关于路由hash与History的设置

目录
  • 关于路由hash与History的设置
    • 1、history 关键字:createWebHistory
    • 2、hash 关键字:createWebHashHistory
  • 路由中hash和history模式区别
    • 1、hash模式
    • 2、history模式
    • 3、两者对比

关于路由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

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和history模式区别

Vue-Router有两种模式:hash模式和history模式。默认的路由模式是hash模式。

1、hash模式

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变化的方法:

(1)监听$route的变化:

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

(2)通过window.location.hash读取#值:

window.location.hash 的值可读可写,读取来判断状态是否改变,写入时可以在不重载网页的前提下,添加一条历史访问记录。

2、history模式

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: [...]
})

3、两者对比

调用 history.pushState() 相比于直接修改 hash,存在以下优势:

pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL;而 hash 只可修改 # 后面的部分,因此只能设置与当前 URL 同文档的 URL。

pushState() 设置的新 URL 可以与当前 URL 一模一样,这样也会把记录添加到栈中;而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中。

pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中;而 hash 只可添加短字符串。

pushState() 可额外设置 title 属性供后续使用。

hash模式下,仅hash符号之前的url会被包含在请求中,后端如果没有做到对路由的全覆盖,也不会返回404错误;history模式下,前端的url必须和实际向后端发起请求的url一致,如果没有对用的路由处理,将返回404错误。

小结:

hash模式URL上带有#,仅 hash 符号之前的内容会被包含在请求中,如 www.hhh.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。

hash模式URL上没有#,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 www.hhh.com/user/id。如果后端缺少对 /use/id 的路由处理,将返回 404 错误。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 关于vue的路由模式及修改方法

    目录 vue路由模式及修改 vue切换路由模式{hash/history} vue路由模式及修改 vue的路由模式有两种模式History和hash模式,切换方式有两种. 默认为hash模式,修改为history的方法如下,此方法也可以修改为hash模式 vue切换路由模式{hash/history} vue中常用的路由模式 hash(#):默认路由模式 histroy(/)切换路由模式 切换路由模式 export default new Router({     // 路由模式:hash(默认

  • Vue中如何把hash模式改为history模式

    目录 把hash模式改为history模式 关于路由hash和history模式 hash模式 history 模式 二者对比 把hash模式改为history模式 如上图所示非常简单 只需要在文件router下的index.js里加上一个mode:'history’即可把hash模式改为history模式.这个时候url上面的#号就不会再存在了,这样就把url成功把hash模式改成history了 关于路由hash和history模式 hash模式 hash 就是指 url 后的 # 号以及后

  • Vue路由模式中的hash和history模式详细介绍

    目录 1. 路由概念 2. hash模式 3. history路由模式 1. 路由概念 路由的本质就是一种对应关系,根据不同的URL请求,返回对应不同的资源.那么url地址和真实的资源之间就有一种对应的关系,就是路由. SPA(Single Page Application)单页面应用程序,基于前端路由而起:整个网站只有一个页面,通过监听地址栏中的变化事件,来通过Ajax局部更新内容信息显示.同时支持浏览器地址栏的前进和后退操作. 前端路由有两种模式:hash 模式和 history 模式. 2

  • vue-router路由模式详解(小结)

    一.路由模式解析 要讲vue-router的路由模式,首先要了解的一点就是路由是由多个URL组成的,使用不同的URL可以相应的导航到不同的位置. 如果有进行过服务器开发或者对http协议有所了解就会知道,浏览器中对页面的访问是无状态的,所以我们在切换不同的页面时都会重新进行请求.而实际使用vue和vue-router开发就会明白,在切换页面时是没有重新进行请求的,使用起来就好像页面是有状态的,这是什么原因呢. 这其实是借助了浏览器的History API来实现的,这样可以使得页面跳转而不刷新,页

  • Vue 前端路由工作原理hash与history的区别

    目录 什么是路由? vue-router的工作原理 1.mode:'hash',在URL中会多'#' 2.mode:'history' 什么是路由? 路由分两种: 前端路由:Hash 地址与组件之间的对应关系 后端路由:浏览器 请求地址+请求方式 与 后端 业务逻辑 之间的一个映射关系 SPA与前端路由: SPA (单页面应用,全称为:Single-page Web applications) 指的是一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与切换都在这唯一的一个页面内完成

  • Vue前端路由hash与history差异深入了解

    目录 前言 简单介绍 Vue Router Vue Router 实现原理 Hash 简述 特点 设置 history 简述 设置 特点 生产环境问题及解决 开发环境- historyApiFallback 总结 前言 没了解这两种路由前,不管是 vue还是 react 在项目创建时难免会进行路由之间选择,在 hash 和 history 难免会纠结一番,或者是直接稀里糊涂用了默认带 # 的 hash 路由,看完这篇分享,保准让你之后不会在为选择哪中路由犯难,实现按需选择.有疑问欢迎在评论区指出

  • Vue的三种路由模式总结

    目录 路由模式解析 1.hash模式 2.history模式 3.abstract模式 路由三个基本概念 vue中实现路由还是相对简单的 vue-cli创建一个项目体验一下, 安装vue-router 路由模式解析 这里要讲vue-router的路由模式,首先要了解的一点就是路由是由多个URL组成的,使用不同的URL可以相应的导航到不同的位置.如果有进行过服务器开发或者对http协议有所了解就会知道,浏览器中对页面的访问是无状态的,所以我们在切换不同的页面时都会重新进行请求. 而实际使用vue和

  • vue3中关于路由hash与History的设置

    目录 关于路由hash与History的设置 1.history 关键字:createWebHistory 2.hash 关键字:createWebHashHistory 路由中hash和history模式区别 1.hash模式 2.history模式 3.两者对比 关于路由hash与History的设置 1.history 关键字:createWebHistory import { createRouter, createWebHistory } from 'vue-router' const

  • vue3中router路由以及vuex的store使用解析

    目录 vue3 router路由及vuex store使用 1.路由 2.vuex vue3中router路由和vuex的store使用,获取对象基本使用 vue3中router和store使用方法 1.企业开发Router全局配置 2.企业开发Store全局配置 功能快捷键 vue3 router路由及vuex store使用 1.路由 <script> import { useRouter, useRoute } from 'vue-router' export default {   s

  • vue3中addRoute路由变化但页面未更新问题解决

    目录 按着vue2的写法写vue3 发现路由变化了但页面没有更新 搜索了半天没有解决办法. 想了半天觉得是重复用同一个对象,vue为了节约性能就没有新建, 被vue3给优化了 解决办法,每次addRoute时 深复制组件对象 import time from "../views/time" function copyObj(obj) { if (typeof obj == "object") { if (Array.isArray(obj)) { let arr =

  • Vue中Router路由两种模式hash与history详解

    hash 模式 (默认) 工作原理: 监听网页的hash值变化 -> onhashchange事件, 获取location.hash 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 会给用户好像跳转了网页一样的感觉, 但是实际上没有跳转 主要用在单页面应用(SPA) // 模拟原理 // 监听页面hash值变化 window.onhashchange = function(){ // 获取当前url的哈希值 const _hash = locat

  • vue-router中的hash和history两种模式的区别

    众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别. hash模式 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body.style.color = has

  • Vue Router路由hash模式与history模式详细介绍

    目录 一.前言 二.hash模式 三.history模式 一.前言 对于hash模式和history模式,最直接的区别就是地址栏带不带"#"号了. vue脚手架搭建的项目的路由默认是hash模式. hash模式: 创建路由实例时,添加mode:"history"属性,即可使用history模式. const router = new VueRouter({ routes, mode: "history" }) history模式: 二.hash模

  • vue3中使用router路由实现跳转传参的方法

    目录 前言 一.路由跳转 二.页面传参需要注意 总结 大家好,今天和大家分享一下vue3中如何进行跳转并进行传参. 前言 vue3取消了vue2部分api,所以路由跳转和传值的方式会有所不同.我们今天主要讲router.push(location, onComplete?, onAbort?)vue3中新增API:useRouter和useRoute 一.路由跳转 1.首先在需要跳转的页面引入API—useRouter import { useRouter } from 'vue-router'

随机推荐