网页不重定向到URL无效指定的页面 [英] Page doesn't redirect to the specified page on invalid url

问题描述

我有以下功能角

功能：

var App = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngAnimate']);

App.config(['$routeProvider', function($routeProvider) {

    $routeProvider

        .when('/', {
            templateUrl: 'views/dashboard.html'
        })
        .when('/:pages', {
            templateUrl: function(routeParams) {
                return 'views/' + routeParams.pages + '.html';
            }
        })
        .otherwise({redirectTo: '404.html'})

}]);

我有一个侧边栏导航控制。和我创建4页。

I have a sidebar navigation control. And I've created 4 pages.

所以，当我点击这些导航项目的相应页面打开正确。

So when I click on those navigation items the respective pages open up correctly.

和有我尚未创建更多的网页。但按照下面的功能。

And there are some more pages that I haven't created yet. But as per the below function.

当我没有一个不存在的东西，它必须返回到一个真实存在的文件夹的根 404.html 文件。

When I don't have something that doesn't exists, it must return to 404.html file that exists in the root of the folder.

这是怎么回事的是，我没有在控制台和URL得到一个错误的地址栏中反映上单击有效的页面。

What's happening is, I don't get a error in the console and the url the in the address bar reflects the last clicked valid page.

有人让我知道我做的错误，这个方法是动态路由是否正确？

Someone let me know where I'm doing the mistake and whether this method of is correct for dynamic routing?

推荐答案

的否则（）部分捕获不符合任何规定航线的路径。

在你的情况下，路由匹配，但模板不可用在指定的URL。结果
$ routeProvider 不知道什么和不能做任何

The otherwise() part catches paths that do not match to any of the specified routes.
In your case, the route matches, but the template is not available at the specified URL.
$routeProvider doesn't know anything about it and can't do much either.

你能做什么，是的不知何故的（见下文）检查模板availableand如果不使用 $位置重定向到一个合适的路径（如 /故障/ 404 ）。

What you can do, is somehow (see below) check if the template is availableand if it is not use $location to redirect to an appropriate path (e.g. /error/404).

为了确定该页面是否有效（即它的模板是可用的），你可以尝试访问模板（使用 $ HTTP ），并发现任何错误（指示没有模板）等，但我不喜欢这种方式（如依赖模板的可用性判断网页的存在/有效性是不是一个很好的做法IMO - 例如，它很容易导致误导性的错误消息在网络或服务器问题等）。

In order to determine if the page is valid (i.e. its template is available) you could try to access the template (using $http) and catch any errors (indicating there is no template) etc. But I don't like this approach (as relying on a the availability of a template for determining the page's existence/validity isn't a very good practise imo - e.g. it could easily lead to misleading error messages in case of a network or server problem etc).

我最喜欢的办法是保持有效/现有的网页列表，对证。如果当前页面应该是可用的，继续像往常一样来获取模板等，如果没有，重定向到一个错误页面。

My favorite approach is to keep a list of "valid"/existing pages and check against it. If the current page should be available, proceed as usual to fetch the template etc. If not, redirect to an error page.

上述逻辑可以被放置在 $ routeProvider 的解析属性（所以被前执行控制器被实例化和视图加载）。

The logic described above could be placed in $routeProvider's resolve property (so it gets executed before the controller is instantiated and the view loaded).

例如：

var App = angular.module(...);

// This should be a constant, so it can
// get injected into configuration blocks
App.constant('EXISTING_PAGES', [
    'page1',
    'page2',
    ...
]);

app.config(function ($routeProvider, EXISTING_PAGES) {    
    $routeProvider.
        when('/', {
            templateUrl: 'views/dashboard.html'
        }).
        when('/:page', {
            templateUrl: function (routeParams) {
                return 'views/' + routeParams.page + '.html';
            },
            resolve: {
                exists: function ($location, $route) {
                    // Because this is executed before the instantiation of the 
                    // controller and the view is not fully loaded yet, the parameters
                    // should be accessed via `$route.current.params`
                    if (EXISTING_PAGES.indexOf($route.current.params.page) === -1) {
                        // This is not a valid/eisting page, 
                        let's redirect to an appropriate error page
                        $location.path('/error/404');
                    }
                    return true;
                }
            }
        }).
        // This should be a separate route, so we can redirect to it
        when('/error/404', {
            templateUrl: '404.html'
        }).
        otherwise({
            redirectTo: '/error/404'
        });
});

---

又见这个 短演示

---

See, also, this short demo.

这篇关于网页不重定向到URL无效指定的页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！