UI route multi level route refresh current page

Posted by kee2ka4 on Sat, 04 Apr 2020 02:50:17 +0200

This is a blog based on the last UI route: UI route multi-level routing nesting default display

Because it used to be a demo, but today it's a big problem because it's ready to be used in the project. Click the other navigation under the secondary navigation and then click the refresh button of the browser. You will find that the current page returns to the default page under the secondary directory, that is, the first page. This can't be tolerated!!

Then today, I changed the default display level 2 to remove the mental bug (or not a bug) that can't refresh the current page but the entire page.

The key point is

<a ui-sref="a" ui-sref-opts="{reload:true}">Class A</a>


controller: function ($state) {
    $state.go('a.a')
}

These two places mean that the $state.go() method will be executed when refreshing and clicking, so as long as refreshing other pages, it will also run to the default page.

Here's what I've come up with. I'll refresh wherever I want

<a class="one" ui-sref="a.a" >Class A</a>

$urlRouterProvider.otherwise('/a'); //First level default
    $stateProvider.state('a', {
            url: '/a',
            templateUrl: 'nav1.html',
        })
var one = document.querySelector('.one');
 one.click();

I don't know if you can understand it. The first step is to enter the first level default page, and then let him click the a tag in the page, and then he will successfully display the second level and the third level below the first level, and at the same time, click the other pages below the second level and refresh them will not be transferred to the default page!!

Complete code

Only the first page and other pages are at the bottom of the previous one

<body data-ng-app="myapp">

    <div class="layout">
        <ul class="layout-head">
            <li>
                <a class="one" ui-sref="a.a" >Class A</a>
            </li>
            <li>
                <a ui-sref="b">second level</a>
            </li>
            <li>
                <a ui-sref="c">Level three</a>
            </li>
        </ul>
        <div data-ui-view=""></div>
    </div>

    <script>
        angular.module('myapp', ['ui.router'])
            .config(function ($stateProvider, $urlRouterProvider) {
                $urlRouterProvider.otherwise('/a'); //First level default
                $stateProvider.state('a', {
                        url: '/a',
                        templateUrl: 'nav1.html',
                    })
                    .state('b', {
                        url: '/b',
                        templateUrl: 'nav2.html'
                    })
                    .state('c', {
                        url: '/c',
                        templateUrl: 'nav3.html'
                    })
                    .state('a.a', {
                        url: '/a.a',
                        templateUrl: 'nav1_1.html'
                    })
                    .state('a.b', {
                        url: '/a.b',
                        templateUrl: 'nav1_2.html'
                    })
            });
    </script>
    <script>
    window.onload = function(){
        var one = document.querySelector('.one');
        console.log(one);
         one.click();
    }
    </script>
</body>

Topics: angular

Programmer Think

UI route multi level route refresh current page

Hot Topics