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

最新推荐文章于 2022-05-05 11:30:59 发布
最新推荐文章于 2022-05-05 11:30:59 发布
阅读量1.1w 收藏
点赞数 1
分类专栏： AngularJS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ice526/article/details/45690555
版权

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

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

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

完成两件事情就行了.

  1. 配置 $locationProvider

  2. 设置我们的相对连接的起点路径

  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>.

 
 
  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4.     <meta charset="utf-8"> 
  5.  
  6.     <base href="/"> 
  7. </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>

  



ice526
关注
专栏目录
JavaScript - 去掉（删除）URL 路径上指定的参数（传递一个 URL 和要删除的参数名，返回结果）
王佳斌
11-11 3367
js 去掉URL路径上指定参数，js删除url指定参数，js删除url指定参数，关于使用JS去除URL中的指定参数问题,js 对url进行某个参数，关于使用JS去除URL中的指定参数问题,js 对url进行某个参数，最简单的方法:JS去除url中某个参数，JS 去掉浏览器中 url 参数，js删除url中的某个参数_js删除url参数_js获取url的某个参，关于使用JS去除URL中的指定参数问题,js 对url进行某个参数，js获取链接去掉参数，JS 获取url中的参数 修改url 参数 移除url参数，
AngularJS使用笔记
weixin_43524910的博客
12-12 365
AngularJS使用笔记简介核心特性1：MVC模式核心特性2：模块化核心特性3：数据的双向绑定使用核心特性5：语义化标签使用步骤生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 简介 这是一个优秀的前段js框架，他的...
Js去除url中指定参数
qq_36881424的博客
07-15 2434
http://blog.rziqee.cn/index.php/article/56.html
最简单的方法：JS去除url中某个参数--正则表达式
weixin_41791737的博客
06-07 4188
问题：昨天一个需求很特别，APP分享的h5链接不能有某个参数 **甩锅大战：**1、我说：APP开发前端掉的都是你的方法，你统一去掉不就行了，省的我们多个地方进行处理； APP开发：竟然说他是直接掉的原生去不掉，让前端自己去掉；气的我一口老血吐他一身。 我心想：都是开发想甩锅直说啊；没办法要怪就怪自己不懂APP开发吧；忍气吞声找解决方法； ** 解决方法 ** 经过一番查找发现项目里面有十多个地方调用了APP注入的分享方法；必须要找一个最简单的方法才可以；发现连个方法 1、先把url转化为json对象然后删
js 删除URL中指定参数
supming1的专栏
10-23 3173
/** * 删除URL中指定search参数,会将参数值一起删除 * @param {string} url 地址字符串 * @param {array} aParam 要删除的参数key数组，如['name','age'] * @return {string} 返回新URL字符串 */ function ridUrlParam(url,aParam){ aParam.forEach(item => { const fromindex = url.indexOf(`${.
js去除url中指定参数
热门推荐
极客神殿
04-18 1万+
在项目中，遇到有参数只需要弹出一次，弹出后返回时就会再次弹出，所以需要将弹出参数取消： 代码如下： function delParam(paramKey) { var url = window.location.href; //页面url var urlParam = window.location.search.substr(1); //页面参数 ...
angularwp:AngularJS和WordPress共存的演示
05-17
- **从URL中删除哈希** - AngularJS通常使用URL中的哈希bang（#）来管理路由，但在WordPress中，可能需要移除或替换它以保持友好的SEO兼容URL。 - **显示帖子评论** - 用AngularJS呈现和管理WordPress的评论，可能...
MEAN_STACK_CRUD-TrainReservationSystem:MEAN STACK中的基本CRUD操作
03-19
在本系统中，AngularJS将用于构建用户友好的界面，实现动态表单、数据绑定和路由等功能。 4. **Node.js**：基于Chrome V8引擎的JavaScript运行环境，使开发者能够在服务器端运行JavaScript代码。Node.js被用来搭建...
疯狂前端开发讲义 jQuery AngularJS Bootstrap前端开发实战
05-08
在前端开发领域，jQuery、AngularJS和Bootstrap是三个极为重要的技术框架，它们分别在不同的层面上解决了网页开发中的各种问题，极大地提高了开发效率和用户体验。接下来，我们将详细探讨这三个技术的核心概念、应用...
微信支付趟坑之旅之单页面应用
zjkyz8的博客
06-22 7943
年初产品引入了微信支付到现在不到半年的时间，一直没有过太大的坑爹经历，自认为微信支付也能hold住了，没想到上周还是被微信支付团队的同学狠狠的摆了一道。在这里留个记录，希望同入此坑的同学能尽快爬上来。 背景：        上半年上线了商城的微信支付，此项目前端为angularjs 的SPA（single page application，单页面应用）。地址类似于：http://mall.zj
js删除url中指定参数
笋笋的博客
05-05 4068
/** * 删除URL中指定search参数,会将参数值一起删除 * @param {string} url 地址字符串 * @param {array} aParam 要删除的参数key数组，如['name','age'] * @return {string} 返回新URL字符串 */ function ridUrlParam(url,params){ for (var index =.
Angular:$locationProvider:$locationProvider.html5Mode
Rudy的专栏
09-10 6324
1. 当设置$locationProvider.html5Mode(true); angualar 默认会将其定位到服务器根目录,比如 http://192.168.22.137:8080//page/Book/book.html, 会被反转成http://192.168.22.137:8080 此时设置ng-view,时如下 Moby 路由配置如下: $routeProvi
AngularJs 中 $routeProvider 与 $stateProvider 的区别
flyingpignj的博客
08-04 8937
https://stackoverflow.com/questions/27645202/what-is-the-difference-between-routeprovider-and-stateprovider-in-angularjs Both do same work as like they used for routing purpose in SPA. 1. An
Angular——$stateProvider路由
qq_42314621的博客
03-11 8501
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Angular中的$routerProvide和$stateProvider都可以用来配置路由，但是两者也有区别。 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;我自己的理解是$routerProvide路由用于单页应用，即页面中没有嵌套
AngularJS的路由 系列
Flyer的后花园
03-19 714
本系列探寻AngularJS的路由机制，在WebStorm下开发。主要包括：   ● 路由的Big Picture ● $routeProvider配置路由 ● 使用template属性 ● 使用templateUrl属性 ● redirectTo属性，接受字符串 ● redirectTo属性，接受函数 ● 使用caseInsensitiveMatc
AngularJS（十一）
qq_43278421的博客
06-20 124
昨天学到$http的快捷方式 <body ng-app="app"> <div ng-controller="ctrl"> <h3>请输入你的信息：</h3> <form id="userForm"> 用户名：<input type="text" name="user" ng-model="params.user" /><br /> 喜欢的图书:<select multiple="mul
关于base href和angular-route
q1325545052的博客
05-04 1860
base href对a链接的影响
Angular开启html5模式实现去除路由上的#号
kingliguo的博客
01-12 2445
1.为什么Angular实现的SPA路由会有#号？    由于是SPA，因此需要使用#号来实现锚点，从而实现不刷新页面 2.什么情况下要去掉#号：   1.当你觉得带有#号的路由很丑的时候   2.当你需要使用GA等工具的时候（由于无法获取#号后的URL，因此对于GA等网页分析工具是灾难，当然你也可以在每次路由切换的 时候给GA发一个路径） 3.我是如何去掉#号的？  
AngularJS启用HTML5模式：移除URL中的#号
在AngularJS中，URL中的#号（哈希号）通常用于区分浏览器的URL路由管理和服务器的URL路由管理。默认情况下，AngularJS使用的是Hashbang模式，即URL中包含#号，这是因为旧版浏览器不支持HTML5 History API，而...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值