Question

Can anybody please explain in step by step manner, how can we remove # from URL in Aurelia

Answer 1

您要查找的功能称为PushState。您可以在Aurelia Hub的Cheat Sheet部分找到更多信息。只需向下滚动到Routing / Configuring PushState。

将a base tag添加到HTML文档的头部。 我认为这不是必需的步骤，因为我的应用程序在没有它的情况下正常运行。
如果您使用的是JSPM，请配置baseURL（在config.js文件中）。
在路由器配置中启用PushState：

    export class App {
        configureRouter(config) {
            config.title = 'Aurelia';
            config.options.pushState = true; // <-- this line
            config.map([
                //... 
            ]);
        }
    }

配置服务器以支持PushState。基本上，这意味着您的服务器应将所有未知路由/网址重定向到主网址（Aurelia应用的地址 - index.html，/home/index ...）。

此步骤取决于您使用的服务器端技术。即对于ASP.NET MVC，这是您定义路由配置的方式：

    public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            // url: "{*pathinfo}" - this redirects all server side calls
            // to Home/Index (default route)
            // with this single change, HTML5 push state is enabled
            routes.MapRoute(
                name: "Default",
                url: "{*pathinfo}",
                defaults: new { 
                    controller = "Home", 
                    action = "Index", 
                    id = UrlParameter.Optional 
                }
            );
        }
    }

编辑：Dwayne Charrington在他的Discover Aurelia网站上有a nice article about PushState，在那里他解释了如何在各种服务器端框架上配置PushState，如Apache，Nginx，.NET Core和Node.js Express。

Answer 2

如果您正在寻找一种快速的方法来完成它，请执行以下操作：

在src/app.ts中的路由器配置中：

config.options.pushState = true;
添加以下内容：

<base href="/">

How to remove # from URL in Aurelia

2 个答案: