vue路由用什么模式 • Worktile社区

不及物动词

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

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

Hash模式：
在hash模式下，路由通过URL的hash值进行控制，即URL中的#符号后面的部分。hash模式的优点是兼容性好，可以在不同的浏览器中正常运行，并且不需要后端的特殊配置。在Vue中，默认使用的就是hash模式。
使用方式：

import VueRouter from 'vue-router';

const router = new VueRouter({
  mode: 'hash',
  routes: [
    // 路由配置
  ]
});

History模式：
在history模式下，路由通过修改浏览器的history API进行控制，无需使用#符号。history模式的优点是URL更加美观，没有#符号的干扰。但是需要后端的支持，因为在history模式下刷新页面或直接通过URL访问某个页面时，需要后端配置相应的路由规则，以防止404错误。
使用方式：

import VueRouter from 'vue-router';

const router = new VueRouter({
  mode: 'history',
  routes: [
    // 路由配置
  ]
});

总结：
选择使用哪种模式，取决于具体的需求和项目情况。如果项目不涉及由后端提供的页面，或者无法修改后端的路由规则，可以选择hash模式；如果希望URL更加简洁美观，并且能够自由控制路由规则，可以选择history模式。

1年前 0条评论

worktile

Worktile官方账号

Vue路由有两种模式，分别是hash模式和history模式。

Hash模式：使用URL中的哈希值（#）来管理路由。在URL中以井号(#)开头的部分被称为哈希值，它不会被包括在HTTP请求中，因此不会触发浏览器的刷新。在Vue中，默认使用的就是Hash模式。使用Hash模式的好处是可以兼容不支持HTML5 History API的浏览器，同时在开发过程中也比较简单，因为不需要进行服务器配置。
History模式：使用HTML5 History API来管理路由。它通过修改浏览器的URL来实现页面的切换，不会包含井号（#）。使用History模式需要服务器的支持，因为需要服务器配置将所有的URL指向同一个入口文件，然后由前端路由来处理对应的页面。使用History模式的好处是URL更加美观，没有井号的存在，同时也减少了URL中冗余的信息，如"/#"。

使用方式：在Vue中，可以通过Vue Router来配置路由模式。在创建Vue实例之前，需要先引入Vue Router，并配置路由匹配规则和对应的组件。在配置Vue Router时，可以通过mode选项来设置路由模式，如下所示：

import Vue from 'vue'
import Router from 'vue-router'

// 引入组件
import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  mode: 'history', // 设置使用History模式
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

在上述代码中，使用了mode: 'history'来设置路由模式为History模式。

兼容性考虑：需要注意的是，Hash模式对浏览器兼容性更好，几乎支持所有的浏览器。而History模式则需要服务器的支持，且在某些旧版本的浏览器中可能不支持。因此，在选择路由模式时，需要考虑到目标用户的浏览器版本。
部署注意事项：如果选择使用History模式，并且需要在生产环境中部署应用，需要确保服务器配置正确，将所有URL都指向同一个入口文件，以便由前端路由来处理页面的切换和加载。同时，还需要配置404页面，以确保在用户输入不存在的URL时，能够正确地显示404页面，而不是返回服务器错误。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

Vue路由可以使用两种模式：哈希模式（hash mode）和历史模式（history mode）。

哈希模式（hash mode）：
在哈希模式下，路由路径会添加一个"#"符号，也称为Hash路由。通过监听window的hashchange事件，Vue的路由系统可以根据不同的hash值来切换不同的组件。

使用哈希模式的步骤：

1）创建Vue实例时，在router选项中设置mode为'hash'。
例如：

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

2）创建路由链接时，使用<router-link>组件来生成导航链接。例如：

<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>

3）创建路由规则时，使用<route-view>组件来显示对应的组件。例如：

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

历史模式（history mode）：
历史模式使用HTML5的history API来实现前端路由。在历史模式下，URL没有添加"#”，看起来更加友好。

使用历史模式的步骤：

1）创建Vue实例时，在router选项中设置mode为'history'。
例如：

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

2）在后端服务器配置中，配置对应的路由规则，使得所有路径都指向Vue的入口页面（比如index.html），这样前端路由就能处理所有的路径了。

3）创建路由链接和路由规则的使用方法与哈希模式相同。

通常情况下，推荐使用历史模式，因为它看起来更加友好且不会在URL中添加"#”。但需要注意的是，使用历史模式在部署到生产环境时可能需要进行一些服务器配置来支持所有的请求路径。

1年前 0条评论