ui-route多级路由刷新当前页

最新推荐文章于 2022-11-24 10:24:23 发布

天空影

最新推荐文章于 2022-11-24 10:24:23 发布

阅读量862

点赞数

分类专栏：大前端-angular 文章标签： ui-route javasxript angular

本文链接：https://blog.csdn.net/jx950915/article/details/79657895

版权

大前端-angular 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这个是基于上一个ui-route的博客： ui-route多级路由嵌套默认显示

因为以前这个是做demo，而今天是因为准备用到项目中去才发现的一个大问题，那就是点击二级导航下的其他导航并且显示后点击浏览器的刷新按钮，会发现当前页回到了二级目录下的默认页，也就是第一页，这个就不能忍了！！

然后今天把那个默认显示二级的改造了一下，去除了不能刷新当前页而是刷新全部页的弱智bug(也可以不算bug)。

其实关键点就在

<a ui-sref="a" ui-sref-opts="{reload:true}">一级</a>


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

这两个地方，意思是刷新和点击的时候会执行$state.go()方法，所以才是只要刷新别的页也是会跑到默认页的。

下面这个是我自己琢磨出来的，我想刷新哪就刷新哪

<a class="one" ui-sref="a.a" >一级</a>

$urlRouterProvider.otherwise('/a'); //一级默认
    $stateProvider.state('a', {
            url: '/a',
            templateUrl: 'nav1.html',
        })
//下面的key需要通过登录进来的时候进行设置
var one = document.querySelector('.one');
var key = sessionStorage.getItem('key');
if(key != ''){
    one.click();
    sessionStorage.setItem('key','');
}

不知道你们看懂了没，就是我们登录进来的时候通过保存一个sessionStorage来判定是否是第一次进入，如果是就执行点击事件显示一级默认的页面并点击那个a标签，然后就会成功显示一级下面的二级以及二级下面的三级页，同时点击二级下面的其他页面并且刷新也不会调到默认页了！！

完整代码

只有首页其他页面在上一篇的最下面


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

    <div class="layout">
        <ul class="layout-head">
            <li>
                <a class="one" ui-sref="a.a" >一级</a>
            </li>
            <li>
                <a ui-sref="b">二级</a>
            </li>
            <li>
                <a ui-sref="c">三级</a>
            </li>
        </ul>
        <div data-ui-view=""></div>
    </div>

    <script>
        angular.module('myapp', ['ui.router'])
            .config(function ($stateProvider, $urlRouterProvider) {
                $urlRouterProvider.otherwise('/a'); //一级默认
                $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');
       var key = sessionStorage.getItem('key');
       if(key != ''){
         one.click();
         sessionStorage.setItem('key','');
       }
    }
    </script>
</body>

天空影

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ui-route多级路由刷新当前页

这个是基于上一个ui-route的博客： ui-route多级路由嵌套默认显示因为以前这个是做demo，而今天是因为准备用到项目中去才发现的一个大问题，那就是点击二级导航下的其他导航并且显示后点击浏览器的刷新按钮，会发现当前页回到了二级目录下的默认页，也就是第一页，这个就不能忍了！！然后今天把那个默认显示二级的改造了一下，去除了不能刷新当前页而是刷新全部页的弱智bug(也可以不算bug)。...
复制链接

扫一扫