Question

我需要在默认模式下运行Vue路由器（aka，哈希模式，也就是我无法在history模式下运行它）。在那种模式下，我所有的动态路线都包含前导的，例如http://myurl.com/#/highlights。但是，如果您删除该前导哈希，例如（http://myurl.com/highlights）网站中断（产生错误no input file specified）。

我的目标是确保不满足任何匹配的路由条件，并且不对用户进行身份验证，将用户重定向到登录屏幕，并且如果对他们进行了身份验证但没有路由匹配，则将他们重定向到主页。

这是我的router.js：


import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Programs from './views/Programs.vue'
import Sizzle from './views/Sizzle.vue'
import Login from './views/Login.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: {
        name: "login"
      }
    },
    {
      path: "/login",
      name: "login",
      component: Login,
    },
    {
      path: '/highlights/:slug?',
      name: 'home',
      component: Home,
      props: (route) => ({ slug: route.params.slug || categories[0].slug })
    },
    {
      path: '*',
      redirect: {
        name: "login"
      }
    }
  ]
})

*请注意，categories是一个JavaScript变量，我会在加载任何Vue.js文件之前通过脚本标记全局实例化。

Answer 1

如官方文档所述，https的默认模式是哈希模式-它使用URL哈希来模拟完整的URL，以便在URL更改时不会重新加载页面。

使用历史记录模式时，如果没有正确的服务器配置，如果用户直接在浏览器中访问vue-router，则会收到404错误。

因此，您所需要做的就是向服务器添加一条简单的“全部捕获”后备路由。如果该网址与任何静态资产都不匹配，则该网址应与您的应用所在的http://myurl.com/highlights页相同。

有关更多服务器配置信息，您可以查看此-example-server-configurations

Answer 2

要摆脱哈希值，我们可以使用路由器的历史记录模式，该模式利用history.pushState API来实现URL导航而无需重新加载页面：

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

以避免使用历史记录模式时出现错误。您需要正确的服务器配置，

示例服务器配置

Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

nignx

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

有关更多信息。访问文档 https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

如果URL不包含哈希（未指定输入文件），则Vue路由中断

2 个答案:

示例服务器配置

Apache

nignx