问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答

初学angularJS+express，路由路径中/转换成%2F，导致路径失效，求原因？

头像
xiexie1357
    43512

    页面打开如下
    clipboard.png

    点击电脑链接，显示url路径如下

    clipboard.png

    点击后

    clipboard.png

    期望的效果如下：

    clipboard.png

    我的代码如下 app.js，用的是"express": "^4.15.2"

    var express = require('express');
var path = require('path');

var app = express();
//使用静态文件服务器中间件
app.use(express.static(path.join(__dirname,'app/public')));
app.listen(8080);

    test.html

    
    <html ng-app="routingDemoApp">
<head>
    <meta charset="utf-8">
    <title>AngularJS 路由实例 - 菜鸟教程</title>
    <script src="/lib/jquery/dist/jquery.js"></script>
    <script src="/lib/bootstrap/dist/js/bootstrap.js"></script>
    <script src="/lib/angular/angular.js"></script>
    <script src="/lib/angular-route/angular-route.js"></script>
    <script>
        angular.module('routingDemoApp',['ngRoute'])
            .config(['$locationProvider','$routeProvider', function config($locationProvider, $routeProvider){

                $routeProvider
                    .when('/',{
                        template:'这是首页页面'
                    }).
                        when('/computers',{
                            template:'这是电脑分类页面'
                }).
                        when('/printers',{
                            template:'这是打印机页面'
                }).
                        otherwise('/');
            }]);
    </script>
</head>
<body>

<h2>AngularJS 路由应用</h2>
<ul>
    <li><a href="#/">首页</a></li>
    <li><a href="#/computers">电脑</a></li>
    <li><a href="#/printers">打印机</a></li>
    <li><a href="#/blabla">其他</a></li>
    <li><a href="#/printers">w3school</a></li>
</ul>

<div ng-view></div>



</body>
</html>

    被这个问题困了很久，求大神指个方向，谢谢

    expressjavascript
    阅读 3.2k
    1 个回答
    得票最新
    头像
    NsNe
      1.7k1218
      ✓ 已被采纳

      这个是angular1.6默认给hash路由上添加了!(感叹号)，导致出错，修改方法如下(添加配置，去掉默认前缀感叹号)：

          angular.module('routingDemoApp',['ngRoute'])
    .config(['$routeProvider', function($routeProvider){
        $routeProvider
        .when('/',{template:'这是首页页面'})
        .when('/computers',{template:'这是电脑分类页面'})
        .when('/printers',{template:'这是打印机页面'})
        .otherwise({redirectTo:'/'});
    }])
    //添加如下配置
    .config(['$locationProvider', function($locationProvider) {
        $locationProvider.hashPrefix("");
    }]);
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题