angularjs ui-router strange behaviour with additional segment in route

前端未结

关注

 2  610

梦谈多话

I\'m suffering a problem with ui-router when I add a wrong segment to the route.

An example... http://xxx.xxxxx.xxx/roles works fine. This is a route defined without

相关标签:

2条回答

轮回少年

2020-12-02 01:31

Not fully sure where is theissue here... but I created working plunker, which should help to see what is needed to see the HTML 5 and ui-router working together. In case that server side is configured properly, this should work out of the box. Please, check this firstly:

How to: Configure your server to work with html5Mode

Now, this would be adjusted state def, to show the deep url nesting:

$stateProvider
    .state('roles', {
        url: '/roles/:id',
        ...
    })
    .state('roles.logs', {
        url: '/logs',
        ...
    })
    .state('roles.logs.parameters', {
        url: '/parameters',
        ...
    });

To make all these call below wroking:

<nav> 
  <a href="roles/11">roles/11/</a><br />
  <a href="roles/22/logs">roles/22/logs</a><br />
  <a href="roles/33/logs/parameters">roles/33/logs/parameters</a><br />
</nav>

<nav> 
  <a ui-sref="roles({id:1})">roles </a><br />
  <a ui-sref="roles.logs({id:2})">roles.logs</a><br />
  <a ui-sref="roles.logs.parameters({id:3})">roles.logs.parameters</a><br />
</nav>

we have to not forget to properly set the base url, in our example:

<!DOCTYPE html>
<html ng-app="MyApp">

  <head>
    ...
    <base href="/cTRk4o9HRELCQ4OK/" />

But for plunker we should set that dynamically:

<script>
  document.write('<base href="'+ document.location.pathname +'" />')
</script>

Check working example here

0 讨论(0)

悲&欢浪女

2020-12-02 01:35

You also have to define an state that points to the otherwise url, this way UI Routers knows how to handle the default state.

var app = angular.module('demo', ['ui.router']);


app.config(function($stateProvider, $urlRouterProvider){
  
  $stateProvider
    .state('roles', {
      url: '/roles',
      templateUrl: 'roles.html'
  })
  
  .state('otherwise', {
     url: '/',
     templateUrl: 'otherwise.html'
   })
  
  $urlRouterProvider
        .otherwise('/');
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/angular-ui/ui-router/0.2.11/release/angular-ui-router.js"></script>

<div ng-app="demo">

    <ul>
      <li><a href="#/roles">Roles</a></li>
      <li><a href="#/roles/ejvwekjfbkjewbv">Otherwise</a></li>
      <li><a href="#/roles/404">Not Found</a></li>
    </ul>
    
    <ui-view></ui-view>
    
      <script type="text/ng-template" id="roles.html">
        <h2>Roles Template</h2>
      </script>
      
      <script type="text/ng-template" id="otherwise.html">
        <h2>Otherwise Template</h2>
      </script>
  
 </div>

0 讨论(0)