vue-router 的两种模式

本文主要介绍 vue-router 的两种路由模式: hash 模式和 history 模式

hash 模式

vue router 默认模式, 格式类似于 http://localhost:8081/#/register, url 中带有 #, 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。

history 模式就和普通的 url 一样, 通过设置 mode 的值可以改变路由模式

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

问题： 路由为 history 模式下, 当直接输入 url 访问或者刷新页面时, 会出现 404, 所以需要后台配置, 一旦 url 匹配不到任何值, 则返回到 index.html , 也就是APP.vue。

1
2
3

location / {
  try_files $uri $uri/ /index.html;
}

以上为 nginx 配置例子