angular配置路由/子页面+vue配置路由/子页面
发布时间：2020-12-17 07:04:11 所属栏目：安全 来源：网络整理
导读：? 1.在vue.js中组件可以复用，然后最近配置了几个子页面 在 这个文件中配置路由，子页面的配置跟其他一样，只不过path不同。 ? routes: [ ??? { path: ‘/‘, ????? name: ‘HelloWorld‘, ????? component: HelloWorld ??? }, ??? { ????? path: ‘/city/li
|
? 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="images/blank.gif" />‘);
??????????????????????? 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(); ?
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
