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，因此不会显示Overview组件。

什么会引起这些奇怪的影响？

Answer 1

Vue路由器具有different modes。检测到浏览器时的默认模式是hash。当前路由由url的哈希部分确定。这种方法的好处是不需要服务器端配置。所有网址都指向相同的资源（例如路线），您可以将其制作为index.html文件。

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

Answer 2

vue-router默认模式是哈希模式，这就是为什么您在URL上看到#的原因。它使用URL哈希来模拟完整的URL，如果页面发生更改，则无需重新加载页面。

要摆脱哈希值，我们可以使用vue-router历史记录模式。像这样更改mode：

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

这会利用History API。

如果要使用历史记录模式，则需要更改服务器配置。 Vue Router文档中有一些示例here。

Answer 3

Vue路由器默认为hash mode。要使您的网址进入http://localhost:8080/test，您需要进入history模式。这样做是因为默认情况下，未设置Web服务器以将所有请求重定向到一个html文件。 hash模式用于每个文档：

vue-router的默认模式是散列模式-它使用URL散列来模拟完整的URL，以便在URL更改时不会重新加载页面。

将您的路由器更改为history模式。但是您需要configure NGINX or Apache2将所有请求重定向到您的vue代码

const router = new VueRouter({
  mode: 'history', // Add this to your router
  routes: [...]
})

无法弄清楚vue-router的工作方式

3 个答案: