JavaScript - DingTalk Web バージョン管理のサイド ナビゲーション バーが更新されず、コンテンツのみが更新されます。具体的なテクノロジは何ですか?

ナビゲーションバーが更新されず、コンテンツのみが更新されるDingTalk Webバージョン管理端末の具体的な技術は何ですか?

アドレスもそれに合わせて更新しますので、具体的な技術キーワードを教えてください。

簡単に言えば、vuejs を使用してこの効果を実現できますか?

返信内容:

ナビゲーションバーが更新されず、コンテンツのみが更新されるDingTalk Webバージョン管理端末の具体的な技術は何ですか?

アドレスもそれに合わせて更新しますので、具体的な技術キーワードを教えてください。

簡単に言えば、vuejs を使用してこの効果を実現できますか?

HTML5 PushState + Ajax。

Ajax は部分更新を実装し、pushState は戻るを実装するためのブラウザの戻るボタンを含むアドレス バーの変更を実装します。 このテクノロジーに基づいて実装された Pjax をご覧ください。

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

アドレスバーは更新されましたか?

単一ページのアプリケーションでこの機能を簡単に実装できます。

js はページジャンプせずに単一ページのコンテンツを切り替えます

アヤックス？ ?

この記事で言及されていたような気がします

http://www.cnblogs.com/08shiy...

DingTalk にアクセスして確認すると、結果は次のとおりです。

1. ナビゲーション バーが更新されていないことがわかります (更新後、ナビゲーションの li を変更します)。 、要求された HTML が返されます。これはページの一部ではなく全体です。

2. 中央の部分は非同期で読み込まれます。[開発ツール] で [JavaScript を無効にする] に移動すると、主に広告スライダーが読み込まれていることがわかります。
3. ほとんどすべての画像がキャッシュされているため、下部が更新されていないように見えます。ネットワークを確認すると、ステータスが 200 ではなく 304 になっています。

vueルーター

シングルページ アプリケーションであっても、Vue などの他のライブラリであっても、原則は最終的には AJAX または PJAX であり、JS バックグラウンドを介してサーバー データ (通常は json または xml データ) を非同期的にリクエストし、DOM を操作してデータを表示します。 js. 単一ページの Web サイトでは、History API を使用して URL を更新することもできます。
AJAX 実装リファレンス: AJAX。学ぶ余地はありませんが、取り入れていきたいと思います。

この会社のプロジェクトはこれに似ています。ポスターのアイデアは次のとおりです。まず、ナビゲーション バーのコンテンツが切り替わっても、ページは更新されず、右側のコンテンツ (iframe のコンテンツ) のみが変更されます。つまり、左側のナビゲーション バーのコンテンツが変更されると、右側の iframe タグの URL 値も変更されます。 js は、左側のナビゲーション バーの変更を監視し、その値を右側の iframe に動的に渡します。元の投稿者のお役に立てば幸いです

これは関連するメソッドです:

functionloadSubmenu(){

リーリー
}

function openItem(itemIndex, tab){

リーリー

}
/
ワークスペースを設定する

/

function setWorkspace(){
リーリー

}

これは関連する HTML dom です: