JavaScript-Nails Web Edition management side navigation bar does not refresh the content-only technology specifically what

Nail Nail Web version management side navigation bar does not refresh only the content of the technology specifically what

Address will also be updated, trouble to say the specific technical keywords Thank you

Simply put, can I use VUEJS to achieve this effect? single page Application

Reply content:

Nail Nail Web version management side navigation bar does not refresh only the content of the technology specifically what

Address will also be updated, trouble to say the specific technical keywords Thank you

Simply put, can I use VUEJS to achieve this effect? single page Application

HTML5 pushstate + Ajax.

Ajax implements a partial refresh, pushstate implementation to change the address bar, including the return of the browser return button implementation.

You can look at the Pjax based on this technique.

Https://github.com/defunkt/jq ...

Is there an update to the address bar?

Single page application Ah, it is convenient to achieve this function ah.

JS switch single page content, do not do page jump

Ajax??

It feels like the article mentions it.
Http://www.cnblogs.com/08shiy ...

The nails were looked down and the results were as follows:
1. The navigation bar is not no refresh, you can modify the DOM (modify the navigation in the Li), after the refresh found that it is actually refreshed, and the request to return the HTML is the entire page instead of the local.
2. The middle part is asynchronously loaded, which you can disable JavaScript in Dev tools to find that the middle area is blank, where it is primarily loaded with AD sliders.
3. The bottom seems to be not refreshed, because the picture is almost entirely cached, you can view the network, the status is 304 instead of 200.

Vue-router

Whether it is a single page application or other libraries such as Vue, its principle is Ajax or Pjax, through the JS background asynchronous request server data, usually JSON or XML data, and then manipulate the DOM through JS display data, a single page site can also use the history API to implement URL refreshes,
Ajax implementation reference: Ajax. No field of study, hope to adopt.

Similar to the company's project, to provide a thought to the landlord: first, the navigation bar content of the switch, the page does not refresh, change is just the content of the right----iframe, and iframed content is by its URL, that is, when the left navigation bar content changes, The URL value of the right IFRAME tag also needs to be changed. JS listens for changes in the left navigation bar, and then dynamically passes the values to the right iframe. Hope to be helpful to the landlord
This is the relevant method:
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);

}
/ Set up workspaces /
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());

}

This is the associated HTML DOM:

