vue路由模式有什么区别 • Worktile社区

worktile

Worktile官方账号

Vue路由模式有两种，分别是Hash模式和History模式。它们的区别主要体现在URL中的标识符和页面刷新时对服务器的请求。

Hash模式：
在Hash模式下，URL中会有一个#符号，而且#后面的部分称为哈希。例如：http://example.com/#/home。在Vue中使用Hash模式的路由，可以通过以下几点来区别：

URL中的哈希部分改变时，路由会自动解析这部分来匹配相应的组件显示。
页面刷新时，浏览器会向服务器发送的请求是不带哈希部分的URL，也就是说服务器只返回静态资源，而不会处理路由路径。这样就需要确保在服务器上配置一个默认页面，用来加载Vue应用。
哈希模式兼容性好，可以兼容几乎所有的浏览器，使用起来也比较简单。

URL中的路径部分改变时，路由会自动解析这部分来匹配相应的组件显示。
页面刷新时，浏览器会向服务器发送的请求是带有路径部分的URL，服务器会根据URL来返回相应的资源，所以在服务器配置中需要处理Vue的路由路径，确保能正确加载页面。
History模式需要服务器的支持，在服务器上需要进行一些配置，以便能正确处理Vue的路由路径。
History模式没有#符号，对于用户体验更好，但兼容性可能会存在一些问题，一些旧版本浏览器和服务器可能不支持。

综上所述，Hash模式和History模式之间的区别在于URL中的标识符和页面刷新时对服务器的请求处理方式。具体选择哪种模式，可以根据项目需求和服务器配置来进行选择。

2年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

Vue的路由模式有两种：hash模式和history模式。它们之间有以下几点区别：

URL格式：在hash模式下，URL会有一个#符号，比如http://example.com/#/home。而在history模式下，URL不会有#符号，比如http://example.com/home。
兼容性：hash模式兼容性更好，可以兼容老旧的浏览器甚至不支持HTML5的浏览器。而history模式只支持HTML5的浏览器，不支持老旧的浏览器。
URL美观性：history模式的URL相对更美观，没有#符号。而hash模式的URL会有#符号，可能会看起来比较繁琐。
路由配置：在hash模式下，不需要后端支持，前端路由的设置完全独立于服务器。而在history模式下，需要服务器的支持，需要配置后端服务器以支持URL的重定向，确保在刷新页面时正常加载对应的前端路由。
部署方式：在hash模式下，可以简单地将前端文件放置在任何一个服务器上，不需要额外的配置。而在history模式下，需要确保在每个前端路由被请求时都返回正确的页面，必须要对服务器进行适当的配置。

尽管两种模式有区别，但它们在大多数情况下都可以满足前端开发的需求。开发者可以根据具体项目的需求来选择使用哪种路由模式。

2年前 0条评论

fiy

Worktile&PingCode市场小伙伴

Vue路由模式有两种：hash模式和history模式。

一、hash模式：
Vue的默认路由模式就是hash模式。在hash模式下，URL中的#号后面的内容被称为hash值，它不会被包含在HTTP请求中，而用于浏览器内部的页面定位。

1.配置路由模式：
在创建Vue实例之前配置路由模式：

const router = new VueRouter({
  mode: 'hash',
  ...
})

2.使用路由：
在Vue组件中使用路由相关api：

<router-link to="/path">Go to Path</router-link>
<router-view></router-view>

<router-link>是用来创建一个链接，当被点击时，会导航到指定的路径。
<router-view>是用来显示当前路由对应的组件。

二、history模式：
history模式使用浏览器提供的history API来实现路由切换，去掉了URL中的#号。

1.配置路由模式：
在创建Vue实例之前配置路由模式：

const router = new VueRouter({
  mode: 'history',
  ...
})

2.使用路由：
与hash模式相同。

三、两者的区别：

URL显示：
- hash模式：URL中有#号。
- history模式：URL中没有#号。
兼容性：
- hash模式：支持所有浏览器。
- history模式：不支持IE9及以下版本。
页面刷新：
- hash模式：刷新页面不会丢失路由信息，因为hash值不会被包括在请求中。
- history模式：刷新页面会发送HTTP请求，需要后端配置支持。

需要注意的是，在使用history模式时，需要在服务器端进行配置，以防止在刷新页面时出现404错误。如果是使用Vue CLI生成的项目，会有默认的服务器配置。

总结：
hash模式的URL中包含#号，可以在所有浏览器中使用，但不美观；而history模式的URL比较美观，但兼容性较差。根据项目需要选择合适的路由模式。

2年前 0条评论