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

Question

我需要在默认模式下运行 Vue 路由器（也就是散列模式，也就是我不能在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是我在加载任何 Vue.js 文件之前通过脚本标记全局实例化的 javascript 变量。

Answer 1

为了摆脱散列，我们可以使用路由器的历史模式，它利用history.pushStateAPI 实现 URL 导航，而无需重新加载页面：

const router = new VueRouter({

  mode: 'history',

  routes: [...]

})

避免在使用历史模式时出错。您需要适当的服务器配置，

示例服务器配置

阿帕奇

<IfModule mod_rewrite.c>

  RewriteEngine On

  RewriteBase /

  RewriteRule ^index\.html$ - [L]

  RewriteCond %{REQUEST_FILENAME} !-f

  RewriteCond %{REQUEST_FILENAME} !-d

  RewriteRule . /index.html [L]

</IfModule>

娘娘腔

location / {

  try_files $uri $uri/ /index.html;

}

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

Answer 2

正如官方文档所说，它的默认模式vue-router是哈希模式——它使用 URL 哈希来模拟完整的 URL，这样当 URL 更改时页面不会重新加载。

当您使用历史模式时，如果没有正确的服务器配置，如果用户http://myurl.com/highlights直接在浏览器中访问，他们将收到 404 错误。

因此，您需要做的就是向您的服务器添加一个简单的全能回退路由。如果 URL 与任何静态资产都不匹配，则它应该提供与index.html您的应用所在的页面相同的页面。

更多服务器配置信息可以查看这个-example-server-configurations