输入url为：http://localhost:3000/main，无效，必须加上index.html才能跳转到main

Question

我的index.html中有：<div ui-view></div>

我的router.js主要部分：

myApp.config(["$stateProvider", '$urlRouterProvider',function($stateProvider,$urlRouterProvider){
    $stateProvider.state('main',{
        url: '/main',
        templateUrl: 'views/main.html',
        controller: 'mainCtrl'
    })
    $urlRouterProvider.otherwise('main');
}])

为什么会出现：

输入url为：http://localhost:3000/main，页面中出现“Cannot GET /main ”控制台network查看http请求是404。必须加上index.html才能跳转到main ，即输入url:http://localhost:3000/index.html 自动跳转为http://localhost:3000/index.html#!/main，可以显示main.html的内容。为啥必须要带上index.html?

Answer 1

慕雪1613582 2017-05-08 23:26:21

讲单页应用的那一节没认真看吧？

http://localhost:3000/main 

是改变了url的请求路径，浏览器会向服务端重新发起请求。

理论上请求的应该是index.html这个页面，完整的路径应该是

http://localhost:3000/index.html

但是gulp-connect进行了默认转发，当访问

http://localhost:3000

的时候会默认返回index.html

而改变#后面的哈希值，浏览器不会向服务端发请求，只会广播事件。

angular-ui-router通过监听事件和判断哈希值在浏览器端动态加载“页面”，从而起到路由的效果

• 提问者 HappyFish8 #1

  谢谢老师，我会结合这些再去仔细看下单页应用那一节。