Question

我使用以下代码链接到个人资料页面：

<p ui-sref="app.profile({profileKey:form.profileKey})">{{form.profileName}}</p>

每当用户点击链接时，我的路由就会运行：

function config($stateProvider)
{
    // State
    $stateProvider
        .state('app.profile', {
            url      : '/profile/:profileKey',
            views    : {
                'content@app': {
                    profileKey: 'pages/profile/profile.html',
                    controller : 'profileController as vm'
                }
            },
            resolve  : {
                profileKey: function ($stateParams)
                {
                    return ($stateParams.profileKey);
                }
            },
            bodyClass: 'profile'
        });
}

我的链接和代码没问题。但是如何通过在浏览器上编写直接URL来访问配置文件页面。我希望您在编写例如：“http://www.myapp.com/profile/lionelmessi”时可以访问它，然后在我的页面controller.js上读取“lionelmessi”值。

但现在它在浏览器上显示"Cannot GET /profile/lionelmessi"消息

我的意思是twitter或facebook在他们的个人资料页面上做的事情。

Answer 1

尝试使用

$locationProvider.html5Mode(true);

更多信息here

Answer 2

如果你没有使用html5Mode，因为@Vitalii建议你需要使用哈希字符将你的app主机名和basepath与URL中的路由部分分开：

这样的事情：

http://www.myapp.com/#/profile/lionelmessi

但是如果您正在使用或想要使用html5mode，请记住您需要：

1）

function config($stateProvider, $locationProvider)
{
  $locationProvider.html5Mode({
        enabled: true
  });

  //your $stateProvider config
}

2）在服务器端有一些重写规则

这是因为您需要index.html处理您网站/应用的每个请求。服务器端代码取决于您要部署应用程序的平台。 Apache（PHP），IIS（.net）等

3）在index.html的HEAD中添加基本标签

<base href="/">

简单的方法是不使用html5mode并在网址中使用hashbang，除非你真的需要。

Angular JS ui-router通过直接URL

2 个答案: