AngularJS中的友好URL：移除URL中的# 遇到的那些坑

最新推荐文章于 2022-11-11 09:22:12 发布

ice526

最新推荐文章于 2022-11-11 09:22:12 发布

阅读量1.1w

点赞数 1

分类专栏： AngularJS

本文链接：https://blog.csdn.net/ice526/article/details/45690555

版权

AngularJS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

用了AngularJS一段时间啦，应项目需要，要移除URL中的那些#号，网上搜了下方法很简单

http://developer.51cto.com/art/201406/443898.htm

要获得干净的URL并将井号从URL中移除是很容易的.

完成两件事情就行了.

配置 $locationProvider
设置我们的相对连接的起点路径

  monitorApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
    function($stateProvider, $urlRouterProvider, $locationProvider) {
        $urlRouterProvider.otherwise('/main/service');
        $stateProvider
            .state('main', {
                url: '/main/:type',
                templateUrl: 'pages/main.html',
                controller: 'MainController'
            })
            .state('monitor', {
                url: '/monitor/:template',
                templateUrl: 'pages/monitor.html',
                controller: 'MonitorController'
            })
        $locationProvider.html5Mode(true);
    }
])

为了在应用程序各处使用相对链接，你将需要在你文档的<head>里面设置一个<set>.

 
 <!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
 
    <base href="/"> 
</head>

在设置过程中遇到两个问题

1. 首页未配置 base href 时，访问/main/service时不能被MainController所控制。

2.配置完成后，页面上所有的a标签设置了href=#的链接都会往默认的首页跳转，因为我配置了

<span style="font-size:18px;">   $urlRouterProvider.otherwise('/main/service');</span>

<span style="font-size:18px;">   为了解决这个问题，刚开始我把href=# 的属性去掉了，后来想想这样的话点击的时候鼠标手势不太对，虽然可以用CSS解决，但是限制太死了</span>

<span style="font-size:18px;">   后来无意中换了一下AngularJS的版本解决了问题，原来出问题的版本是v1.2.5 ，换成了1.3.9</span>