釘網頁版管理端 導覽列不刷新 只刷新內容的技術具體是什麼
地址也會隨著更新， 麻煩說出具體的技術關鍵字 謝謝
簡單點說 我可以使用vuejs實現這個效果嗎 單頁應用
釘網頁版管理端 導覽列不刷新 只刷新內容的技術具體是什麼
地址也會隨著更新， 麻煩說出具體的技術關鍵字 謝謝
簡單點說 我可以使用vuejs實現這個效果嗎 單頁應用
HTML5 pushState + Ajax。
Ajax實作局部刷新，pushState實作更改網址列，包括瀏覽器返回按鈕實現返回。
可以看看基於此技術實現的Pjax。
https://github.com/defunkt/jq...
網址列有更新麼
單頁應用啊，就可以方便的實現這點功能啊。
js切換單頁內容，不做頁面跳轉
Ajax？ ？
感覺像是這篇文章提及的
http://www.cnblogs.com/08shiy...
去釘釘看了下，結果如下：
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(){
<code>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 = $('<dd><a href="javascript:;" url="' + v.url + '" parent="' + p + '" id="item_' + k + '">' + v.text + '</a></dd>');
item.children('a').click(function(){
openItem(this.id.substr(5));
});
$('#submenu').append(item);
});</code>}
function openItem(itemIndex, tab){
<code>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);</code>}
/ 設定工作區 /
function setWorkspace(){
<code>var wWidth = $(window).width();
var wHeight = $(window).height();
$('#workspace').width(wWidth - $('#left').width() - parseInt($('#left').css('margin-right')));
$('#workspace').height(wHeight - $('#head').height());</code>}
這是相關的 HTML dom:
<code> <div id="leftMenus">
<dl id="submenu">
<dt><a class="ico1" id="submenuTitle" href="javascript:;"></a></dt>
</dl>
</div>
</div>
<div id="right">
<iframe frameborder="0" style="display:none;" width="100%" id="workspace"></iframe>
</div></code>
