Question

我有下一个代码：

var app = angular.module('ForclazApp', ['ngRoute']);

app.config(function($routeProvider){
    $routeProvider
        .when("/", {
            templateUrl: "partials/header.html"
        })
        .when("/motos", {
            templateUrl: "partials/motos.html"
        })
        .when("/repuestos", {
            templateUrl: "partials/repuestos.html"
        })
        .when("/taller", {
            templateUrl: "partials/taller.html"
        })
        .when("/blog", {
            templateUrl: "partials/blog.html"
        })
        .when("/contacto", {
            templateUrl: "partials/contacto.html"
        })
        .otherwise({
            redirectTo: '/'
        });
});

无论您点击哪个链接，它始终会重定向到header.html模板。我正在使用AngularJS 1.6.3。控制台日志不会显示任何错误。

菜单的链接：

<ul class="nav navbar-nav navbar-right">
    <li class="nav-li"><a href="#/" class="nav-link">Inicio </a></li>
    <li class="nav-li"><a href="#/motos" class="nav-link">Motos </a></li>
    <li class="nav-li"><a href="#/repuestos" class="nav-link">Repuestos </a></li>
    <li class="nav-li"><a href="#/taller" class="nav-link">Taller </a></li>
    <li class="nav-li"><a href="#/blog" class="nav-link">Blog </a></li>
    <li class="nav-li"><a href="#/contacto" class="nav-link">Contacto </a></li>
</ul>

Answer 1

 .otherwise({
        redirectTo: '/'
    });

基本上是说如果没有其他选项匹配则转到路线/。在你的情况下哪个是主要的。您的.when(..支票与您希望的方式不符。

在你的HTML中。从所有链接中删除/。所以看起来应该是这样的：

<li class="nav-li"><a href="#contacto" class="nav-link">Contacto </a></li>

将按您希望的方式匹配。

Answer 2

您应该删除所有#。我认为您应该使用ui-router代替ng-router。它对你更好

https://github.com/angular-ui/ui-router

AngularJS路由总是以main为主

2 个答案: