vue-router 历史模式在刷新时不起作用

Posted 2023-02-22

【中文标题】vue-router 历史模式在刷新时不起作用

【英文标题】：vue-router history mode doesn't work on refresh

【发布时间】：2018-07-07 04:26:42

【问题描述】：

我将 vue-router 添加到我的项目中，它在基本设置下运行良好。但我想去掉 URL 中的主题标签 (#)。所以跟随the documentation 我切换到历史模式。我使用此链接 (<router-link to="/page/4">Open page</router-link>) 效果很好，但如果我尝试直接访问此页面（刷新），服务器会返回 404 错误屏幕。

我使用 nginx（docker 的 nginx:alpine 映像），这是 default 文件：

server 
    root /var/www;
    index index.html index.htm;

    server_name localhost;

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

这是路由器：

new VueRouter(
  mode: 'history',
  routes: [
    
      path: '/page/:id',
      component: page
    
  ],
);

为什么会返回 404 错误？

【问题讨论】：

不是一个解决方案，只是一个旁注：router-link 之所以有效，是因为它是一个 pushState，而不是对该 URL 的真正请求（因此它不会发送到服务器）。真正的请求是在您直接导航或刷新时发出的。

当使用历史模式时，您需要确保您的服务器返回任何服务器请求的索引页。您需要在服务器端进行配置。

【参考方案1】：

在使用历史模式时，您需要一条全能路线。 Vue-router 用于客户端路由，当您在浏览器中直接访问 url 时，它会尝试通过您的服务器进行路由，因此是 404。

以 Laravel 为例，你可以像这样定义 catch all 路由：

// match all GET or HEAD requests and return the my-app.index.blade.php file
Route::get('/view?', 'HomeController@index')
     ->where('view', '(.*)')
     ->name('my-app.index');

这将匹配任何路由 GET 或 HEAD 请求并返回主视图页面。在该页面中是 javascript 应用程序，然后 vue-router 将采取相应的行动。

但是，现在您的应用将永远不会显示 404，因此要正确显示 404 页面，您需要在 js 路由中创建另一个 catch all。请参阅页面末尾的警告部分：

https://router.vuejs.org/en/essentials/history-mode.html

编辑：

// nginx redirect 
location / 
    try_files /index.html =404;

【讨论】：

我将 vue 用于客户端（没有 PHP），并且 index.html 是我希望处理所有请求的地方。但看起来 nginx 在尝试加载 mysite.com/page/1 时不会将用户重定向到 mysite.com/index.html。这就是我想做的。

添加了 nginx 重定向回答

不幸的是它并没有改变任何东西。 ://

【参考方案2】：

这是 nginx 配置问题 将下面的配置插入到您的 nginx 服务器块/配置中

error_page 404 /index.html;

【参考方案3】：

首先，

在你的 route.js 文件中添加：

    path: '/*',
    redirect:  name: 'route-name' 

这会将所有无效路由重定向到您想要的路由。

其次，在 Laravel 中的 web.php 文件中：

Route::get('/any', function()  return view('your-main-view'); )->where('any', '(.*)');