vue为什么会有两种路由模式 • Worktile社区

fiy

Worktile&PingCode市场小伙伴

Vue有两种路由模式是为了满足不同的需求和适应不同的场景。

Hash模式：
Hash模式是指URL中以 # 符号开头的路由模式。在Hash模式下，URL的变化不会导致浏览器向服务器发送请求，因此不会刷新页面。Vue使用Hash模式的优势是兼容性好，在不支持HTML5 History API的浏览器中也能正常使用路由。Hash模式下的URL通常会有一个“#”符号和参数，如http://example.com/#/home
History模式：
History模式是指URL中不带 # 符号的路由模式。在History模式下，URL的变化会导致浏览器向服务器发送请求，并且服务器需要配置支持这种模式。Vue使用History模式的优势是URL更友好，没有“#”符号和参数，更符合传统的URL风格。History模式下的URL通常是纯粹的路径，如http://example.com/home

选择使用哪种路由模式要根据项目的实际需求进行决策。如果项目需要兼容性好，且不需要友好的URL，可以选择Hash模式。如果项目需要更友好的URL，且服务器支持History模式，可以选择History模式。在使用Vue Router时，可以通过配置mode选项来选择使用哪种路由模式。

总之，Vue有两种路由模式是为了满足不同的需求和适应不同的场景，根据项目实际需求进行选择和配置。

2年前 0条评论

不及物动词

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

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

Hash模式：在hash模式下，路由器会使用URL的hash部分（即#后面的内容）来作为路由地址。这种模式下，URL的变化不会触发页面的重新加载，而是通过监听URL的hash变化来实现页面的切换。这种模式的优点是兼容性好，可以支持老版本的浏览器；缺点是URL比较丑陋，不利于SEO。
History模式：在history模式下，路由器通过使用浏览器的HTML5 History API来实现页面的切换。这种模式下，URL的变化会触发服务器的请求，服务器会返回对应的页面，然后前端路由器再进行页面的渲染。这种模式的优点是URL比较美观，利于SEO；缺点是需要服务器的支持，对于不支持HTML5 History API的浏览器需要做兼容处理。

为什么Vue会有两种路由模式呢？原因是因为不同项目对于路由的需求不同。对于一些简单的项目，hash模式已经足够满足需求，而且兼容性好；而对于一些大型的项目或对SEO要求比较高的项目，history模式更加合适。因此，Vue提供了两种路由模式，开发者可以根据具体项目的需求选择合适的模式。

在Vue中，可以通过设置mode属性来切换路由模式。默认情况下使用hash模式，即mode: 'hash'；如果要使用history模式，可以设置为mode: 'history'。同时，为了配合history模式，需要在服务器上进行相应的配置，以确保在刷新页面时能正确返回对应的页面。

2年前 0条评论

worktile

Worktile官方账号

Vue框架中的路由模式有两种，分别是hash模式和history模式。这两种模式在实现前端路由时有不同的方式和优缺点。下面将分别介绍这两种模式的具体原理和使用方式。

原理：
在浏览器中，当URL中的#号发生变化时，浏览器会自动滚动到对应的位置，同时触发hashchange事件，我们可以利用这个特性来实现前端路由。

操作流程：

优点：

缺点：

二、history模式
history模式通过利用HTML5的history.pushState()方法来实现前端路由。它将路由信息保存在浏览器的历史记录中，而不需要每次都在URL中加入#号。

原理：
通过使用history.pushState()方法，可以修改浏览器地址栏的URL，并将路由信息保存在浏览器的历史记录中。当用户点击浏览器的返回按钮时，可以通过监听popstate事件来处理对应的路由逻辑。

操作流程：

优点：

缺点：

总结：
两种路由模式各有优缺点，选择合适的路由模式需要考虑项目的具体情况和需求。如果项目需要兼容性好且不要求URL美观，可以选择hash模式；如果项目对URL美观度有要求且允许HTML5浏览器，则可以选择history模式。

2年前 0条评论