请列出vue的路由有哪些模式有什么区别 • Worktile社区

worktile

Worktile官方账号

Vue的路由可以分为两种模式：hash模式和history模式。

hash模式：
在hash模式下，URL的结构是以#号为分隔符，#号后面的部分被称为hash，它不会被包含在请求中，也不会导致页面刷新，只会触发路由的变化。hash模式是为了解决浏览器不支持history API的问题。

使用hash模式的示例代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'hash',
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

history模式：
在history模式下，URL的结构不再有#号，而是通过使用浏览器提供的history API来实现页面的切换，它会将路由的变化以及相关的状态保存在浏览器的历史记录中。

使用history模式的示例代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

区别：

URL结构：hash模式下，URL带有#号，而history模式下，URL没有#号。
兼容性：hash模式兼容性更好，支持所有浏览器，而history模式需要浏览器支持history API。
语义化：history模式更符合传统的URL形式，更加直观和友好，不带#号的URL更加美观。

总结：
如果你的应用要求兼容性更好，并且对URL的语义化不太敏感，可以选择hash模式；如果你的应用在现代浏览器环境中运行，并且对URL的语义化有一定的要求，可以选择history模式。

1年前 0条评论

不及物动词

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

Vue的路由提供了三种模式：hash模式、history模式和abstract模式。

Hash模式：
- 使用URL中的hash值来模拟URL的改变，通过监听hashchange事件来实现页面的切换。
- 例如：http://www.example.com/#/home
- 优点是兼容性好，在不支持HTML5 History API的浏览器上也可以正常工作。
- 缺点是URL中包含"#"(井号)符号，不太美观；URL的改变只会修改hash值，不会触发页面刷新，因此无法通过后端配置来处理路由。
History模式：
- 使用HTML5 History API来实现页面的切换，修改URL而不添加#符号。
- 例如：http://www.example.com/home
- 优点是URL比较美观，不会包含#符号；
- 缺点是需要后端配置来支持URL的改变，否则刷新页面时会出现404错误；不支持HTML5 History API的浏览器无法正常工作。
Abstract模式：
- 主要用于非浏览器环境，例如Node环境。
- 通过修改window.location对象的hash值来实现页面的切换。
- 适用于前端渲染的服务器环境，例如SSR(Server-side Rendering)。

这三种模式是Vue路由的基本模式，根据实际的需求和项目的环境选择合适的模式来使用。在大多数情况下，推荐使用History模式，因为它较为现代化和美观。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

Vue.js 路由提供了多种模式来进行页面跳转和管理。以下是常用的几种路由模式及其区别：

hash 模式
在 hash 模式下，URL 中的 # 符号用来表示页面内的锚点，后面的路径字符串用来表示路由路径。如 http://example.com/#/user/list。
使用 hash 模式需要在创建 Vue Router 实例时配置 mode: 'hash'。
history 模式
在 history 模式下，URL 中不再有 # 符号，而是直接使用常规的 URL 路径。如 http://example.com/user/list。
使用 history 模式需要服务器支持，当用户刷新或直接访问 history 模式下的 URL 时，服务器需要在所有的页面地址都返回同一个 HTML 页面，以便 Vue Router 可以接管应用程序并正确地将页面渲染到客户端。在配置 Vue Router 实例时，需要设置服务器的基本路径（base）。
abstract 模式
abstract 模式通常用于非浏览器环境下，比如某些基于 Node.js 的桌面应用程序。它不会更改 URL，而是仅通过内部机制进行导航。
使用 abstract 模式需要在创建 Vue Router 实例时配置 mode: 'abstract'。
嵌套路由
Vue Router 还支持嵌套路由，即路由之间可以存在父子关系。在配置路由时，可以在 children 属性中定义子路由。这样，在父组件中显示的区域可以用 <router-view> 组件来渲染子路由对应的组件。
命名路由
命名路由可以为路由规则命名，以便在程序中方便地进行跳转。在定义路由时，可以通过 name 属性为路由规则命名，然后在代码中使用 $router.push({name: 'xxxx'}) 进行跳转。
动态路由
动态路由指在路由的路径中包含参数，参数可以通过冒号 : 来指定。例如，定义一个动态路由规则如 {path: '/user/:id'}，然后在组件中可以通过 $route.params.id 获取到传递的参数值。

总结：
Vue.js 路由提供了 hash、history 和 abstract 等几种模式来适应不同的环境和需求。其中，hash 模式适用于简单的单页应用程序，history 模式适用于需要更加友好的 URL，并支持服务器渲染的应用程序，而 abstract 模式则适用于非浏览器环境下的应用程序。此外，Vue Router 还支持嵌套路由、命名路由和动态路由等功能来满足更复杂的应用场景。

1年前 0条评论