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

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

在

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

  routes: [

    {

path: '/',

      name: 'HelloWorld',

      component: HelloWorld

    },

    {

      path: '/city/lichuan',

      name: '利川',

      component:citylevel

    }

这样，就可以通过路径直接访问到这个页面，同时比较方便的就是通过name这个值可以传递参数到该页面。当时不知道可以这样传参，就卡壳在拼音（路径截取到）到中文（入参）转换的问题。

后来发现有这个name,可以直接通过this.$route.name获取到，中文也可以传参了。

顺带附上截取：

window.location.href; //获取url中"?"符后的字串

这个后来没有用上。

 

2。angular中配置路由 其中还有部分创建过程不是很明白 浏览器有点问题 下次补充

这里是实现不同权限的用户看到看到不同的导航栏：

在config.js中写不同的menu，

在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="data: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();