哪些开源中间件支持与VueRouterHistory兼容的AspNetCore？

2026-05-06 06:083阅读0评论SEO教程

内容介绍
文章标签
相关推荐

本文共计643个文字，预计阅读时间需要3分钟。

哪些开源中间件支持与VueRouterHistory兼容的AspNetCore？

VueRouterHistory 用于 Vue 单页面应用，基于 VueRouter 的 History 模式，通过 AspNetCore 提供文件服务。

前言：使用 VueRouter 路由组件时，应了解 VueRouter 有 hash 和 history 两种模式。hash 模式会在 URL 中包含 # 符号。

VueRouterHistory

用于Vue单页面应用，使用VueRouter的History模式下，通过AspNetCore提供文件服务。

前言

用过VueRouter路由组件的应该都知道，VueRouter有hash和history两种模式。hash模式会在url中插入#，history模式下url则看上去更加简洁美观。如果想要支持history模式则必须要后端服务进行配合。

常用后端服务器配置方式请参考后端配置例子

后端配置例子

注意：下列示例假设你在根目录服务这个应用。如果想部署到一个子目录，你需要使用 Vue CLI 的 publicPath 选项 (opens new window)和相关的 router base property (opens new window)。你还需要把下列示例中的根目录调整成为子目录 (例如用 RewriteBase /name-of-your-subfolder/ 替换掉 RewriteBase /)。

Apache

<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule>

除了 mod_rewrite，你也可以使用 FallbackResource。

nginx

location / { try_files $uri $uri/ /index.html; } 原生 Node.js

const localhost:%s', github.com/SpringHgui/VueRouterHistory


使用方法

通过nuget安装VueRouterHistory

Install-Package VueRouterHistory -Version 1.0.2


注册中间件app.UseVueRouterHistory()

在app.UseRouting()或app.MapControllers()之后添加app.UseVueRouterHistory();
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }
    app.UseHttpsRedirection();

    app.UseStaticFiles();

    app.UseRouting();
    
    // ==============添加这一行即可================
    app.UseVueRouterHistory();

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
    });
}


将Vue编译后的产物全部放置到wwwroot文件夹下
开始体验你的应用吧~

结语
VueRouterHistory中间件的使用，让我们免于对iis进行配置以实现history模式部署，使项目不管是托管在IIS还是直接自托管模式，都不需要进行额外的配置。

欢迎有需要的朋友通过VueRouterHistory包进行支持history模式，如遇到问题，请提交ISSU。

标签：ASPNETCore开源中间件VueRouterHi

本文共计643个文字，预计阅读时间需要3分钟。

VueRouterHistory 用于 Vue 单页面应用，基于 VueRouter 的 History 模式，通过 AspNetCore 提供文件服务。

前言：使用 VueRouter 路由组件时，应了解 VueRouter 有 hash 和 history 两种模式。hash 模式会在 URL 中包含 # 符号。


VueRouterHistory

用于Vue单页面应用，使用VueRouter的History模式下，通过AspNetCore提供文件服务。
前言
用过VueRouter路由组件的应该都知道，VueRouter有hash和history两种模式。hash模式会在url中插入#，history模式下url则看上去更加简洁美观。如果想要支持history模式则必须要后端服务进行配合。
常用后端服务器配置方式请参考 后端配置例子
后端配置例子
注意：下列示例假设你在根目录服务这个应用。如果想部署到一个子目录，你需要使用 Vue CLI 的 publicPath 选项 (opens new window)和相关的 router base property (opens new window)。你还需要把下列示例中的根目录调整成为子目录 (例如用 RewriteBase /name-of-your-subfolder/ 替换掉 RewriteBase /)。
Apache
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

除了 mod_rewrite，你也可以使用 FallbackResource。
nginx
location / {
  try_files $uri $uri/ /index.html;
}

原生 Node.js
const localhost:%s', github.com/SpringHgui/VueRouterHistory

使用方法

通过nuget安装VueRouterHistory

Install-Package VueRouterHistory -Version 1.0.2


注册中间件app.UseVueRouterHistory()

在app.UseRouting()或app.MapControllers()之后添加app.UseVueRouterHistory();
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Home/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }
    app.UseHttpsRedirection();

    app.UseStaticFiles();

    app.UseRouting();
    
    // ==============添加这一行即可================
    app.UseVueRouterHistory();

    app.UseAuthorization();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
    });
}


将Vue编译后的产物全部放置到wwwroot文件夹下
开始体验你的应用吧~

结语
VueRouterHistory中间件的使用，让我们免于对iis进行配置以实现history模式部署，使项目不管是托管在IIS还是直接自托管模式，都不需要进行额外的配置。

欢迎有需要的朋友通过VueRouterHistory包进行支持history模式，如遇到问题，请提交ISSU。

标签：ASPNETCore开源中间件VueRouterHi

相关推荐

相关推荐

`相关推荐`

`相关推荐`