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. Tarjan求LCA

    LCA问题算是一类比较经典的树上的问题 做法比较多样 比如说暴力啊,倍增啊等等 今天在这里给大家讲一下tarjan算法! tarjan求LCA是一种稳定高速的算法 时间复杂度能做到预处理O(n + m ...

  2. P1342 请柬

    最近一直在做最短路......所以今天就再做一道最短路吧.... 题目描述 在电视时代,没有多少人观看戏剧表演.Malidinesia古董喜剧演员意识到这一事实,他们想宣传剧院,尤其是古色古香的喜剧片 ...

  3. Log4j2 简介

    介绍 Log4j2是Log4j的升级版,与之前的版本Log4j 1.x相比.有重大的改进,修正了Logback固有的架构问题的同事,改进了许多Logback所具有的功能. 特性 一.API 分离 Lo ...

  4. 按Enter登录,Esc退出

    回车登录,下图处,选择登录按钮的方法 下图是按ESC

  5. vue用hbuilderX打包app嵌入h5方式云打包和遇到的问题

    vue用hbuilderX打包app嵌入h5方式云打包和遇到的问题 vue用hbuilderX打包app就可以了,不过有兼容性问题,转换rem的用不了,嵌入到app的webview里面变得很小了,另外 ...

  6. jenkins+git+maven

    这个有参考:https://blog.csdn.net/xlgen157387/article/details/50353317 主要针对一些错误记录一下 1.如果要不想用系统的jdk等,可以在全局工 ...

  7. log4J日志框架

    log4j的配置:log4j是一个日志输出框架,就是用于输出日志的,主流框架大部分都是Log4j输出.Spring框架也可以通过Log4j输出日志 Log4j提供了强大的日志输出的自定义功能(1)通过 ...

  8. Client not ready yet.....

    提示Client not ready yet.....程序安装上就提示停止了 Logcat无提示 只有run里边提示  Client not ready yet....... 我尝试了  Clean ...

  9. Python3 tkinter基础 Tk quit 点击按钮退出窗体

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  10. CentOS中使用tcpdump抓包

    安装: yum install tcpdump 命令使用: 监听特定网卡 tcpdump 抓取第一块网卡所有数据包 [root@server110 tcpdump]# tcpdump tcpdump: ...