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();  
 

angular配置路由/子页面+vue配置路由/子页面的更多相关文章

  1. 四、vue前端路由(轻松入门vue)

    轻松入门vue系列 Vue前端路由 七.Vue前端路由 1. 路由的基本概念与原理 后端路由 前端路由 实现简单的前端路由 vue-router基本概念 2. vue-router的基本使用 基本使用 ...

  2. vue - 详细路由配置

    1. 路由可配置多个 2. 路由包含嵌套子路由 3. 路由可以别名 4. 路由单独钩子 5. vue2.6.0(可以直接匹配大小写) export default new Router({ mode: ...

  3. vue创建路由,axios前后台交互,element-ui配置使用,django contentType组件

    vue中创建路由 每一个vue组件都有三部分组成 template:放html代码 script:放js相关 style:放css相关 vue中创建路由 1.先创建组件 Course.vue 2.ro ...

  4. vue的路由配置

    路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容.Home按钮 => home 内容, ...

  5. Vue配置路由和传参方式及路由守卫!

    安装路由 npm i vue-router -S 引入路由 import VueRouter form VueRouter 注入路由模块 Vue.use(VueRouter) 定义路由匹配规则 let ...

  6. vue 路由(二级)配置及详细步骤

    1.安装插件(可以选择在初始化项目的时候安装) cnpm install vue-router --save-dev 2.将插件全局引入到项目中(main.js) import VueRouter f ...

  7. (一) Vue在创建的时候 入口文件 及相关的路由配置(及子路由配置)

    1. 首先明确一点  在书写之前尽量保持相关的文件知道含义 比如 components 啥的 知道是要放什么东西 在这里介绍一下   由于 vue 不是系统学习 所以很多的创建方式可能不一样  就是有 ...

  8. vue+element-ui路由配置相关

    vue+element-ui路由配置相关 转自:http://www.cnblogs.com/MonaSong/p/6703804.html vue-router2中说明了,子路由前面可以不加'/', ...

  9. vue入门----------路由配置

    在使用脚手架搭建好项目后要配置路由 1.首先要安装vue-router,你可以在项目的package.json文件中的dependencies项目中添加"vue-route": & ...

随机推荐

  1. redux中间件的原理

    前言react已经出来很久了,其生态圈之庞大,一锅炖不下!各种react-xx,已让我们不堪重负,github上随便一个demo,引入的模块至少都是五指之数+.看着头疼,嚼之无味…….在此建议新学者, ...

  2. eclipse jpa 工具生成实体类

    1,配置数据库连接 打开eclipse, 选择数据库: 下一步,选择驱动包 根据自己的驱动包路径选择对应的驱动包: 2,配置jpa-tool 在项目上面右键->properties 点击ok,然 ...

  3. 浅谈Linux文件与目录权限

    作为一个程序员,在工作的过程中或多或少都会接触都Linux,那么对于权限这块肯定有所了解,今天有空想谈谈觉得比较绕的权限问题,即文件权限与目录权限 1.文件权限,对于文件权限这个是比较简单的,也很容易 ...

  4. Delphi下MSMQ(Mircosoft Message Queue)实例(私有队列)

    网上关于消息队列技术原理说明的详细文档很多,但涉及到Delphi的具体实现很少,这是我从网上找了一上午的资料,自己整合和尝试的能运行的程序. 打开控制面板->程序->添加组件,添加消息队列 ...

  5. racle SQL性能优化

    (1) 选择最有效率的表名顺序(只在基于规则的优化器中有效): Oracle的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表 driving table)将被最先 ...

  6. bzoj2809 [Apio2012]dispatching(左偏树)

    [Apio2012]dispatching Description 在一个忍者的帮派里,一些忍者们被选中派遣给顾客,然后依据自己的工作获取报偿.在这个帮派里,有一名忍者被称之为 Master.除了 M ...

  7. 示例, linq分组

    public class HIS_CLIREGISTER : BaseModel{ private String _FBCODE;[StringLength(8)]/// <summary> ...

  8. OO第二次博客作业—17373247

    OO第二次博客作业 零.写在前面 OO第二单元宣告结束,在这个单元里自己算是真正对面向对象编程产生了比较深刻的理解,也认识到了一个合理的架构为编程带来的极大的便利. (挂三次评测分数 看出得分接近等差 ...

  9. element-ui表单form和rules踩坑

    问题: 代码: <el-form ref="form" :rules="rules" :model="form" label-widt ...

  10. TeamCity安装

    1 使用docker安装 安装手册:https://hub.docker.com/r/jetbrains/teamcity-server/2 安装包安装. docker run -it --name ...