我正在创建一个网络作品集，主页上有一个菜单。当用户单击“视频”时，我希望网站转到 mywebsite.com/video 并转到 video.html。我正在使用 AngularJS，但我不知道自己做错了什么。
index.html
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body ng-app="myApp">
<nav class="topnav" id="myTopnav">
<a href="#portfolio">Portfolio</a>
<a href="#events">Upcoming Events</a>
<a href="#cv">CV</a>
<a href="#video">Video Reel</a>
</nav>
<div class="ng-view"></div>
</body>
主要.js
var app = angular.module('myApp', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when(
'/', {
redirectTo: '/home'
})
.when('/portfolio', {
templateUrl: 'templates/portfolio.html'
})
.when('/events', {
templateUrl: 'templates/events.html'
})
.when('/cv', {
templateUrl: 'templates/cv.html'
})
.when('/video', {
templateUrl: 'templates/video.html'
})
.otherwise({ redirectTo: '/' });
});
最佳答案
你能否尝试将$locationProvider 服务添加到配置中并更改href 属性
//html
<body ng-app="myApp">
<nav class="topnav" id="myTopnav">
<a href="#/portfolio">Portfolio</a>
<a href="#/events">Upcoming Events</a>
<a href="#/cv">CV</a>
<a href="#/video">Video Reel</a>
</nav>
<div class="ng-view"></div>
</body>
//js
app.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when(
'/', {
redirectTo: '/'
})
.when('/portfolio', {
templateUrl: 'templates/portfolio.html'
})
.when('/events', {
templateUrl: 'templates/events.html'
})
.when('/cv', {
templateUrl: 'templates/cv.html'
})
.when('/video', {
templateUrl: 'templates/video.html'
})
// removed other routes ... *snip
.otherwise({
redirectTo: '/'
}
);
// enable html5Mode for pushstate ('#'-less URLs)
//$locationProvider.html5Mode(true);
//$locationProvider.hashPrefix('!');
}]);
关于javascript - 无法让路由与 AngularJS 一起工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44526937/