如果 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({&nbsp; mode: 'history',&nbsp; routes: [...]})避免在使用历史模式时出错。您需要适当的服务器配置，示例服务器配置阿帕奇<IfModule mod_rewrite.c>&nbsp; RewriteEngine On&nbsp; RewriteBase /&nbsp; RewriteRule ^index\.html$ - [L]&nbsp; RewriteCond %{REQUEST_FILENAME} !-f&nbsp; RewriteCond %{REQUEST_FILENAME} !-d&nbsp; RewriteRule . /index.html [L]</IfModule>娘娘腔location / {&nbsp; 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