Skip to content

[vue] vue-router路由有几种模式?说说它们的区别? #416

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

[vue] vue-router路由有几种模式?说说它们的区别?

Activity

wenyejie

wenyejie commented on Jun 27, 2019

@wenyejie

共有两种模式
hash: 使用变更hash不会刷新页面的特性, 来变更路由, 做到单页面无刷新
history: 使用html5的history方法, 不支持老旧浏览器, 但是如果要部署到服务器的化, 需要在ng上进行相应的正向代理跳转, 否则拷贝的链接会打不开

Eleven-SL

Eleven-SL commented on Aug 15, 2019

@Eleven-SL

默认为 hash 模式,在 VueRouter 实例中添加 mode 属性并设值为 'history' 更改为 history 模式,此模式基于 html5

liuxiaoyang1

liuxiaoyang1 commented on Nov 19, 2019

@liuxiaoyang1

hash模式和history模式,一般的前端使用hash模式,hash表示的是url中#的变化,当#变化是引起路由跳转

WenJieLi1998

WenJieLi1998 commented on Apr 19, 2020

@WenJieLi1998

hash模式:
1.url路径会出现“#”号字符
2.hash值不包括在Http请求中,它是交由前端路由处理,所以改变hash值时不会刷新页面,也不会向服务器发送请求
3.hash值的改变会触发hashchange事件
history模式:
1.整个地址重新加载,可以保存历史记录,方便前进后退
2.依赖H5 API和后台配置,没有后台配置的话,页面刷新时会出现404

xinping7he

xinping7he commented on Sep 8, 2021

@xinping7he

hash模式:
1、hash值是url中#及后面的部分
2、hash值改变不会引起页面刷新
3、hash值的改变会触发hashchange事件

history模式:
1、利用history.pushState来完成url跳转而无需刷新页面
2、需要后台配置支持,如果URL 匹配不到任何静态资源,服务器应该返回应用依赖的 index.html 页面

ZhQuella

ZhQuella commented on Nov 3, 2021

@ZhQuella

难道不是有三种模式吗?

abstract适用于所有JavaScript环境,例如服务器端使用Node.js。如果没有浏览器API,路由器将自动被强制进入此模式。

Funqiewei

Funqiewei commented on Mar 10, 2022

@Funqiewei

harsh模式 默认的模式 hash值url#及部分
history模式 添加mode:'history'修改 添加后#消失

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @wenyejie@haizhilin2013@Eleven-SL@WenJieLi1998@liuxiaoyang1

        Issue actions

          [vue] vue-router路由有几种模式?说说它们的区别? · Issue #416 · haizlin/fe-interview