Vue 俩种路由模式

柔光的暖阳◎ 2022-12-18 15:57 53阅读 0赞

浏览器对页面的访问是无状态的，所以我们在切换不同的页面时都会重新进行请求。

而实际使用 vue 和 vue-router开发就会明白，在切换页面时是没有重新进行请求的，使用起来就好像页面是有状态的，这是什么原因呢？？？

这其实是借助了浏览器的History API 来实现的，这样可以使得页面跳转而不刷新，页面的状态就被维持在浏览器中了。

vue-router中默认使用的是hash模式，也就是URL中带有\#号

可以使用mode属性修改值

import Vue from 'vue'
    import Router from 'vue-router'
    import Main from '@/components/Main'
    Vue.use(Router)
    
    export default new Router({ 
      mode: 'history',
      routes: [
        { 
          path: '/',
          component: Main
        }
      ]
    })

这样URL中的\#号就被去除了

## 俩种模式的区别 ##

1，hash模式

hash模式背后的原理是 onhashchange 事件，可以在window对象上监听这个事件

更关键的一点是，hash发生变化的url都会被浏览器记录下来，浏览器的前进后退都可以用，尽管浏览器没有请求服务器，但是页面状态和url一一关联起来

2，history路由

随着 history api的到来，前端路由开始进化了，hash模式下的onhashchange只能改变\#后面url片段，而history api则给了前端完全的自由

history api 可以切换和修改  
切换：back，forward，go三个方法  
修改：pushState，replaceState

但它有个毛病，怕刷新，刷新就是实实在在地去请求服务器

在hash模式下，前端路由修改的是\#中的信息，而浏览器请求时是不带它的，所以没有问题，但是在history下，可以自由的修改path，当刷新时，如果服务器中没有相应的响应或着资源，会分分钟钟刷出一个404来

popstate实现history路由拦截，监听页面返回事件  
当活动历史记录条目更改时，将触发popstate事件

发表评论取消回复

表情：

评论列表（有 0 条评论，53人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue路由模式

聚沙成塔·每天进步一点点本文内容 ⭐ 专栏简介路由模式 1. Hash 模式 2. History 模式选择路

小灰灰/ 2024年04月06日 15:32/ 0 赞/ 83 阅读

相关 Vue：路由管理模式

三种模式 Vue.js 的路由管理有三种模式： Hash 模式（默认）：在 URL 中使用 \ 符号来管理路由。例如，http://example.com/\/a

亦凉/ 2024年03月26日 00:16/ 0 赞/ 65 阅读

相关 vue路由两种模式区别hash和history

hash hash模式原理是onhashchange事件，可以在window对象上监听这个事件： window.onhashchange = function(

清疚/ 2023年01月19日 03:05/ 0 赞/ 25 阅读

相关 Vue 路由的两种模式 history 和 hash，以及命名路由

对于Vue这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-Router存在的意义。前端路由的核心，就在于——改变试图的同时不会向后端

迷南。/ 2022年12月31日 02:28/ 0 赞/ 172 阅读

相关 Vue 俩种路由模式

浏览器对页面的访问是无状态的，所以我们在切换不同的页面时都会重新进行请求。而实际使用 vue 和 vue-router开发就会明白，在切换页面时是没有重新进行请求的，使用起

柔光的暖阳◎/ 2022年12月18日 15:57/ 0 赞/ 54 阅读

相关浅析Vue两种路由模式

背景知识大多数vue项目采用SPA(单页面应用)的模式开发，不同视图的切换，都要通过前端路由去管理和控制。因此平时我们开发vue的项目，都会install vue

迷南。/ 2022年11月28日 00:53/ 0 赞/ 191 阅读

相关 Vue的三种路由模式

路由模式解析这里要讲vue-router的路由模式，首先要了解的一点就是路由是由多个URL组成的，使用不同的URL可以相应的导航到不同的位置。如果有进行过服务器开发或者对

缺乏、安全感/ 2022年11月05日 03:05/ 0 赞/ 195 阅读

相关 VUE_vue动态路由，引入所有路由，vue路由模块化

require.context 主要使用require.context实现前端工程化动他引入文件 require.context(directory, useSubdir

蔚落/ 2022年11月04日 00:52/ 0 赞/ 294 阅读

相关 vue 路由、嵌套路由、动态路由

简介路由就是一套映射规则，当url中的哈希值（\hash）改变时，路由会根据制定好的规则，展示对应的视图组件。 vue中的路由路径分为：相对路径（不带 ‘/’，会拼接

朴灿烈づ我的快乐病毒、/ 2022年10月29日 13:28/ 0 赞/ 430 阅读

相关 VUE3路由Router导航、模式

> 路由守卫也称为导航守卫，用来对路由导航进行守卫，控制导航的跳转，可以进行权限的控制，分为： > > 1、全局前置守卫：使用router.beforeEach > 2、

川长思鸟来/ 2022年09月07日 14:39/ 0 赞/ 243 阅读