javascript - 钉钉网页版管理端导航栏不刷新只刷新内容的技术具体是什么

Question

钉钉网页版管理端 导航栏不刷新 只刷新内容的技术具体是什么 地址也会随着更新， 麻烦说出具体的技术关键词 谢谢 简单点说 我可以使用vuejs实现这个效果吗 单页应用

PHPz · Answer

蛤！最近我也是在用vue搞一个单页应用，建议你使用vue-route（←感觉好像拼错了，路由的单词。。。）就可以做到这种上面的url变化而局部刷新。
实现这种局部刷新的，第一个想到的应该是ajax，当然对应起url，那就是大名鼎鼎的pjax了，也就是html5里面的pushState + ajax，这方面我建议你可以看下张鑫旭的demo
其次优雅降级，用iframe，专门对付ie老古董的，但是对应做到路由管理的，还是比较困难
前端路由可是web的未来呢。路由管理什么的，交给前端做就行了，后台负责接口开发和数据库管理就好了。

PHP中文网 · Answer

使用 pjax就可以实现了我这个站就是使用它实现的。http://www.zanyy.com

PHPz · Answer

公司项目与之类似，给楼主提供一个思路：首先，导航栏内容的切换，页面并没有刷新，变的只是右边的内容----iframe的内容，而iframed 内容是靠它的url得到的，也就是说，当左边导航栏的内容变化了，右边iframe标签的url值也要做出变化。js监听左边导航栏的变化，然后动态传值给右边iframe中。希望对楼主有帮助
这是相关的方法：
function loadSubmenu(){

var m = menu[currTab];
/* 子菜单标题 */
$('#submenuTitle').text(m.subtext ? m.subtext : m.text);
/* 删除所有现有子菜单 */
$('#submenu').find('dd').remove();
/* 将子菜单逐项添加到菜单中 */
$.each(m.children, function(k, v){
    var p = v.parent ? v.parent : currTab;
    var item = $('' + v.text + '');
    item.children('a').click(function(){
        openItem(this.id.substr(5));
    });
    $('#submenu').append(item);
});

}
function openItem(itemIndex, tab){

if(typeof(itemIndex) == 'undefined')
{
    var itemIndex = menu[currTab]['default'];
}
var id      = '#item_' + itemIndex;
if(tab){
    var parent = tab;
}else{
    var parent  = $(id).attr('parent');
}
/* 若不在当前选项卡内 */
if(parent != currTab){
    /* 切换到指定选项卡 */
    switchTab(parent);
}
/* 高亮当前项 */
$('#submenu').find('a').each(function(){
    $(this).removeClass('selected');
});
$(id).addClass('selected');

/* 更新iframe的内容 */
$('#workspace').show();
$('#workspace').attr('src', $(id).attr('url'));

/* 将该操作加入到历史访问当中 */
addHistoryItem(currTab, itemIndex);

}
/ 设置工作区 /
function setWorkspace(){

var wWidth = $(window).width();
var wHeight = $(window).height();
$('#workspace').width(wWidth - $('#left').width() - parseInt($('#left').css('margin-right')));
$('#workspace').height(wHeight - $('#head').height());

}

这是相关的 HTML dom:

javascript - 钉钉网页版管理端 导航栏不刷新 只刷新内容的技术具体是什么

全部回覆(13)我來回復

javascript - 钉钉网页版管理端导航栏不刷新只刷新内容的技术具体是什么