无法弄清楚 vue-router 是如何工作的

Question

我有一个带有以下路由器的 Vue.js 项目：

import Vue from 'vue';
import Router from 'vue-router';
import Overview from '@/components/Overview';
import Experiment from '@/components/ForExperiment';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      redirect: 'test',
    },
    {
      path: '/overview',
      component: Overview,
    },
    {
      path: '/overview/from/:from/to/:to',
      name: 'overview',
      component: Overview,
    },
    //... some other urls goes here.
    {
      path: '/test',
      name: 'test',
      component: Experiment,
    },
  ],
});

如果我http://localhost:8080在浏览器中打开，我将被重定向到http://localhost:8080/#/test. 为什么不只是http://localhost:8080/test？“#”符号从何而来？

为什么如果我打开http://localhost:8080/test我被重定向到http://localhost:8080/test#/test？

更奇怪的是，如果我打开，http://localhost:8080/overview我会被重定向到http://localhost:8080/overview#/test，因此不会显示概览组件。

什么会导致这些奇怪的影响？

Answer 1

Vue 路由器有不同的模式。检测到浏览器时的默认模式是hash。当前路由由 url 的哈希部分确定。这种方法的优点是不需要服务器端配置。所有 url 都指向同一个资源（例如路由），您可以使用它来创建 index.html 文件。

您可以将此模式更改为history。历史模式使用浏览器的历史api。它仅适用于最近的浏览器，但此时支持应该不是问题。它还需要服务器端配置，因为您需要在内部将路由器 url 重写为同一文件。如果您不这样做，刷新页面将显示 404 页面而不是您想要查看的页面。