Question

我将 vue-router 添加到我的项目中，它可以正常使用基本设置。但我想删掉URL中的＃标签（＃）。因此，在the documentation之后，我切换到历史记录模式。我使用此链接（<router-link to="/page/4">Open page</router-link>）工作得很好，但如果我尝试直接访问此页面（刷新），服务器将返回404错误屏幕。

我使用 nginx （docker＆＃39; s nginx：alpine 图片），这是默认文件：

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错误？

Answer 1

使用历史记录模式时，您需要捕获所有路线。 Vue-router用于客户端路由，当您在浏览器中直接访问URL时，它正在尝试路由您的服务器，因此404。

例如，使用Laravel，您可以定义捕获所有路径，如下所示：

// 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。请参阅页面末尾的警告部分：

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

编辑：

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

Answer 2

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

error_page 404 /index.html;

Answer 3

首先，

在route.js文件上添加：

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

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

第二，在Laravel中的web.php文件上：

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

vue-router历史模式不适用于刷新

3 个答案: