2021-12-13 vue-router history mode nginx 配置方式

Posted 2023-03-21

参考技术A 域名/地址： www.yourDomain.com

项目 A：projectA（最终打包出来的文件夹名称）

项目 B：projectB（最终打包出来的文件夹名称）

想要最终的访问方式：

默认 vue-router 会配置如下：

再来看一下 vue.config.js 的配置

接着来配置 nginx

保存配置，重启 nginx 或者重新加载 nginx 配置

域名/地址： www.yourDomain.com

项目：project（最终打包出来的文件夹名称）

首先 vue-router 的文件不用动，去修改 vue.config.js 的 publicPath

nginx 中配置

Vue-Router 命名路由回退

【中文标题】Vue-Router 命名路由回退

【英文标题】：Vue-Router named route fallback

【发布时间】：2021-09-19 19:02:55

【问题描述】：

我正在用 VueJS 和 Vue-Router 构建一个项目。 尽管它运行良好，但我想知道当找不到 named 路由时是否有后备选项。 我确实有一个 404 页面的包罗万象的路由，在输入无效 URL 时可以按预期工作。

const router = new Router(
  linkExactActiveClass: 'active',
  mode: 'history',
  routes: [
    
      path: '*',
      components: 
        header: AppHeader,
        default: NotFound,
        footer: ContentFooter
      ,
    ,
  ]
);

但是，当找不到命名路由器链接中的组件时，用户只会看到一个完全空白的屏幕。 例如，一个带有不存在组件的路由器链接，如下所示：

<router-link class="nav-link" :to=" name: 'someNameHere' ">
    Click here!
</router-link>

导致出现空白屏幕，并在控制台中记录警告 [vue-router] Route with name 'someNameHere' does not exist。

有没有办法让 catch-all/fallback 组件在这种情况下也能正常工作？

【参考方案1】：

这是路由器作者的设计决定，因为这是一个开发错误。话虽如此，您可以在导航到它之前使用路由保护来检查路由是否存在。比如：

router.beforeEach((to, from, next) => 
  if (to.matched.length < 1) 
    next(false);
    router.push('/404');
   else 
    next();
  
);