Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
haizhilin2013 opened this issue Jun 22, 2019 · 7 comments
Open
Labels
vue vue

Comments

@haizhilin2013
Copy link
Collaborator

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

@haizhilin2013 haizhilin2013 added the vue vue label Jun 22, 2019
@wenyejie
Copy link

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

@Eleven-SL
Copy link

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

@liuxiaoyang1
Copy link

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

@WenJieLi1998
Copy link

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

@xinping7he
Copy link

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

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

@ZhQuella
Copy link

ZhQuella commented Nov 3, 2021

难道不是有三种模式吗?

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

@Funqiewei
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
vue vue
Projects
None yet
Development

No branches or pull requests

8 participants