Home > Article > Web Front-end > Let’s talk about how to solve the #!# problem in ngRoute path?
This article will introduce to you the #!# solution when the ngRoute path appears. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
Related recommendations: "angularjs tutorial"
When I was working on an open source project, I used "angular-route": "^1.6.4", I found that after setting the href of the 3499910bf9dac5ae3c52d5ede7383485 tag, the path that appears after clicking is not #/, but #!#. However I did not set hashPrefix.
<a href="#about" class="ng-binding">About</a>
After clicking the label, the address bar will appear: http://localhost:9000/#!#about.
Print $location.
We found that the $location we set was not displayed in the path part of the pseudo URL as expected, but ran to the hash part.
The reason is: when the route version is >1.6.0, the default hashPrefix is modified to ‘!’.
Equivalent to the following code
$locationProvider.hashPrefix('!');
There are two solutions provided below:
1. Restore hashPrefix to the version before 1.6 That way.
$locationProvider.hashPrefix('');
2. Change the format of href
<a href="#!about" class="ng-binding">About</a>
Another thing to note is that once ngRoute is introduced, the 3499910bf9dac5ae3c52d5ede7383485 tag will seem to have the default behavior overridden by ngRoute. , once the href starts with #, it will add a / to the hash part of the URL instead of appending the string directly to #, so something like 18b46262ad9db4792237c5069a8fe255 cannot jump to the id ="about" tag. I did some research and found that I can write an instruction and then call window.location.hash to solve this problem.
html
<a goto="#about" href="#about" class="ng-binding">About</a>
js
define(['app'], function (app) { app.directive('goto', function () { return function ($scope, $elem, $attrs) { $elem.click(function () { //console.log($attrs.goto.substring(1)); window.location.hash = $attrs.goto.substring(1); }); }; }); });
Note: The above define is requireJS to define a module.
For more programming-related knowledge, please visit: Programming Teaching! !
The above is the detailed content of Let’s talk about how to solve the #!# problem in ngRoute path?. For more information, please follow other related articles on the PHP Chinese website!