angular配置路由/子页面+vue配置路由/子页面

时间:2021-04-20 05:41:04

 

1.在vue.js中组件可以复用,然后最近配置了几个子页面

angular配置路由/子页面+vue配置路由/子页面

这个文件中配置路由,子页面的配置跟其他一样,只不过path不同。

  routes: [
    {
path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/city/lichuan',
      name: '利川',
      component:citylevel
    }
这样,就可以通过路径直接访问到这个页面,同时比较方便的就是通过name这个值可以传递参数到该页面。当时不知道可以这样传参,就卡壳在拼音(路径截取到)到中文(入参)转换的问题。
后来发现有这个name,可以直接通过this.$route.name获取到,中文也可以传参了。
顺带附上截取:
window.location.href; //获取url中"?"符后的字串
这个后来没有用上。
 
2。angular中配置路由 其中还有部分创建过程不是很明白 浏览器有点问题 下次补充
这里是实现不同权限的用户看到看到不同的导航栏:
angular配置路由/子页面+vue配置路由/子页面
在config.js中写不同的menu,

 

angular配置路由/子页面+vue配置路由/子页面

 

在menu中:

 
        "name": "导航栏标题1",
        "icon": "text-primary glyphicon glyphicon-picture",
        "submenu": [
            {
                "name": "导航栏标题1.1",
                "url": "#/mainMenu/comAccInfoManagement"
            },  {
                "name": "导航栏标题1.2",
                "url": "#/mainMenu/supAccInfoManagement"
            },  {
                "name": "导航栏标题1.3",
                "url": "#/mainMenu/admAccInfoManagement"
            },

        ]

 

在app.js中配置页面:

.state('mainMenu.comAccInfoManagement,{
        url: '/SaleReport',
        templateUrl: 'views/back/comAccInfoManagement.html',          //文件夹 的路径
        controller: 'comAccInfoManagement'     //js文件路径
    })
 
 
 
生成导航:
function createMenu(arr) {
        var $ul_1 = $('<ul></ul>');
        $ul_1.addClass('main-menu');
        $.each(arr,
        function() {
                var $oLi = $('<li><h4><i></i>' + this.name + '</h4></li>');
                // var $oLi = this.url ? $('<li><h4><i></i><a href = ' + this.url + '>' + this.name + '</a></h4></li>') : $('<li><h4><i></i>' + this.name + '</h4></li>');
                $oLi.find('i').addClass(this.icon);
                if (this.submenu) {
                        createSubMenu(this.submenu, $oLi);
                };
                $ul_1.append($oLi);
        });
 
        //层级缩进
        var $oUl = $ul_1;
        var lev = 1;
        var initTextIndent = 2;
        while ($oUl.find('ul').length > 0) {
                initTextIndent = parseInt(initTextIndent) + 1.5 + 'em'; //增加一个级别,缩进增加2em
                $oUl.children().children('ul').addClass('lev-' + lev)
                            .children('li').css('text-indent', initTextIndent);
                $oUl = $oUl.children().children('ul');
                lev++;
        };
 
        // $ul_1.find('ul').hide();
        // $ul_1.children(':first').children('ul').show();
        // $ul_1.children(':first').find('li,a').addClass('current');
        // console.log($ul_1);
        //绑定事件
        $ul_1.find('h4,a').click(function() {
                if ($(this).siblings('ul').length > 0)
                    $(this).siblings('ul').slideToggle('fast').end()
                        .children('img').toggleClass('unfold');
                   
                else {
                        $ul_1.find('li,a').removeClass('current');
                        $(this).addClass('current');
                        //$("ul.main-menu li:first ul.lev-1").css('display','none');
                }
                // $(this).parent('li').siblings().find('ul').hide()
                //         .end().find('img.unfold').removeClass('unfold');
        });
       
 
        $('.wrap-menu').append($ul_1);
    };
//创建子菜单
    function createSubMenu(sArr, $tLi) {
        var self = arguments.callee;
        var $sUl = $("<ul></ul>");
        var oUrl, $sLi;
        $.each(sArr,
        function() {
                oUrl = this.url || 'javascript:void(0)';
                $sLi = $('<li><a href="' +oUrl+ '">' + this.name + '</a></li>');
                if (this.submenu) {
                        // $sLi.children('a').prepend('<img src="images/blank.gif" alt=""/>');
                        self(this.submenu, $sLi);
                }
                $sUl.append($sLi);
        });
        $tLi.append($sUl);
        // // $sUl.find('li.a').click(function(event) {
        //   Act on the event
        //  alert(this.url);
        // });

    };
    // createMenu(aMenu);
    var authority = function(){
        if (sessionStorage.getItem('userKindId')=="1") {
            createMenu(aMenu);
         // $location.path("/mainMenu/Zshow");
        }
        else if (sessionStorage.getItem('userKindId')=="2") {
            createMenu(aMenu1);
            // $location.path("/mainMenu/Zshow");
        }
        else if (sessionStorage.getItem('userKindId')=="3") {
            createMenu(aMenu2);
            // $location.path("/mainMenu/Zshow");
        }else if (sessionStorage.getItem('userKindId')=="5") {
            createMenu(aMenu3);
            // $location.path("/mainMenu/Zshow");
        }
    }
    authority();