美文网首页
Vue路由模式

Vue路由模式

作者: 前端小阿坤 | 来源:发表于2020-10-08 08:58 被阅读0次

为了构架单页面应用,需要引入前端的路由系统Vue-router。

路由有两种模式:hash、history,默认会使用hash模式,但是如果url里不想出现丑陋hash值,在new VueRouter的时候配置mode值为history来改变路由模式,本质使用H5的histroy.pushState方法来更改url,不会引起刷新。

hash模式背后原理:

 其实就是调用了window.onhashchange方法 hash值的切换

history模式的原理:

本质使用H5的histroy.pushState方法来更改url

hash模式和history模式的区别

hash模式较丑,history模式较优雅

hash兼容IE8以上,history兼容IE10以上

history模式需要后端配合将所有访问都指向index.html,否则用户刷新页面,会导致404错误

相关文章

  • 2020-06-03面试--vue基础篇

    1,vue的路由实现原理有哪几种 答案:Vue的路由实现:hash模式 和 history模式 hash模式:在浏...

  • 2020-06-03面试--vue基础篇

    ####1,vue的路由实现原理有哪几种 答案:Vue的路由实现:hash模式 和 history模式 hash模...

  • Vue-router路由

    vue 监听路由变化 vue-router 由hash向history模式变迁 什么是路由 后端路由:对于普通的网...

  • vue小总结

    MVVM模式: Vue就是基于MVVM模式实现的一套框架,在Vue中 路由 VUEX .vue文件

  • Vue核心插件之路由模式

    单页面应用的路由模式:哈希模式和history.vue路由原理:哈希模式(核心:锚点) 原理 安装使用(路由是以插...

  • vue-router源码初探

    路由模式 vue-router 提供了三种运行模式: hash: 使用 URL hash 值来作路由。默认模式。 ...

  • Vue Router路由插件

    Vue Router,路由插件。 #要点 hash模式和history模式的区别? 路由组件传参与props属性注...

  • Vue的两种路由模式

    在vue-router路由对象中,路由有两种模式:hash和history,而默认的是hash模式. hash路由...

  • nginx vue前后端分离配置示例

    vue + thinkphp vue为history路由模式,固定/api,/static前缀为php使用 vue...

  • 关于vue--路由(公众号开发总结)

    关于路由 在router.js中引入vue和vue-router 路由模式 前端路由就是一个前端不同页面的状态管理...

网友评论

      本文标题:Vue路由模式

      本文链接:https://www.haomeiwen.com/subject/nuycpktx.html