javascript - DingTalk網頁版管理端 導覽列不重新整理 只重新整理內容的技術具體是什麼

DingTalk網頁版管理端 導覽列不重新整理 只重新整理內容的技術具體是什麼

地址也會隨著更新， 麻煩說出具體的技術關鍵詞 謝謝

簡單點說 我可以使用vuejs實現這個效果嗎 單頁應用

回複內容：

DingTalk網頁版管理端 導覽列不重新整理 只重新整理內容的技術具體是什麼

地址也會隨著更新， 麻煩說出具體的技術關鍵詞 謝謝

簡單點說 我可以使用vuejs實現這個效果嗎 單頁應用

HTML5 pushState + Ajax。

Ajax實現局部重新整理，pushState實現更改地址欄，包括瀏覽器返回按鈕實現返回。

可以看看基於此技術實現的Pjax。

https://github.com/defunkt/jq...

地址欄有更新麼

單頁應用啊，就可以方便的實現這點功能啊。

js切換單頁內容，不做頁面跳轉

Ajax？？

感覺像是這個文章提及的
http://www.cnblogs.com/08shiy...

去DingTalk看了下，結果如下：
1.導覽列並不是沒有重新整理，你可以修改一下dom（修改導航裡的li），重新整理後發現其實是被重新整理的，而且請求回來的html返回的是整個頁面而不是局部。
2.中間部分是非同步載入的，這點你可以在Dev Tools裡去Disable JavaScript，發現中間地區是空白的，這裡它主要載入的是廣告的slider。
3.底部似乎看起來是不被重新整理的，因為圖片幾乎全是cached，這點你可以查看Network，狀態是304而不是200.

vue-router

不管是單頁應用還是其他Vue之類的庫也好，其原理最終是AJAX或者是PJAX，通過JS後台非同步請求伺服器資料，通常是json或者是xml的資料，然後通過js操縱DOM顯示資料，單頁網站還可以用History API來實現URL的重新整理，
AJAX實現參考：AJAX。學無領域，希望採納。

公司項目與之類似，給樓主提供一個思路：首先，導覽列內容的切換，頁面並沒有重新整理，變的只是右邊的內容----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:

