データへのVue2.5 23観光プロジェクトインスタンスの詳細ページのAjaxダイナミックアクセス

詳細-AJAX：ブランチを作成します

そして、ローカルブランチの切り替えを引っ張っ：

gitのプル
gitのチェックアウトの詳細 -ajax

オープンDetail.vueページには、コードを追加します。

'axios'からインポートaxios 

エクスポートデフォルト{ 
  データ（）{ 
    リターン{ 
      ：sightName ''、// 大标题 
      bannerImg： ''、// バナー 
      gallaryImgs：[] // 画廊轮播
      リスト：[] 
    } 
  }、
  搭載（）{ 
    この.getDetailInfo（）
  }、
  メソッド：{ 
    getDetailInfo（）{ 
      axios.get（ '/api/detail.json' 、
        {paramsは：{ID：この。$ route.params.id}} 
      ）.then（この.getDetailInfoSucc）
    }、
    getDetailInfoSucc（RES）{ 
      RES = res.data
       // はconsole.log（RES）
      場合（res.ret && res.data）{
         この .sightName = res.data.sightName
         この .bannerImg = res.data.bannerImg
         この .gallaryImgs = res.data.gallaryImgs
         この .LIST = res.data.ticketList 
      } 
    } 
  } 
}

そして、サブアセンブリに渡されます。

< テンプレート> 
< divの> 
  < 詳細-バナー：sightName = "sightName" 
   ：bannerImg = "bannerImg" ：gallaryImgs = "gallaryImgs" > </ 詳細-バナー> 
  < 詳細-ヘッダ> </ 詳細-ヘッダ> 
  < divのスタイル= "高さ：50rem" > 
    < 詳細リスト：リスト= "リスト" > </ 詳細リスト> 
  </ DIV > 
</ DIV > 
</ テンプレート>

オープンBanner.vueレセプション：

< テンプレート> 
< divの> 
  < divのクラス= "バナー" @click = "handleBanner" > 
    < IMG クラス= "バナー-IMG" ：SRC = "bannerImg"  /> 
    < divのクラス= "バナー情報" > 
      < divのクラス= "バナータイトル" > {{this.sightName}} </ DIV > 
      < DIV クラス= "バナー番号" > 
        < I クラス=」iconfontバナー・アイコン」 >＆＃xe692; </ I> 
         {{this.gallaryImgs.length}} 
      </ DIV > 
    </ DIV > 
  </ DIV > 
  < 共通GALLARY ：IMGS = "gallaryImgs" V-ショー= "showGallary" @close = "gallaryClose" > </ コモンGALLARY > 
</ DIV > 
</ テンプレート> 

< スクリプト> 
輸入CommonGallaryから' 共通/ GALLARY / GALLARY ' 
輸出デフォルト{ 
  小道具：{ 
    sightName：文字列、
    bannerImg：文字列、
    gallaryImgs：配列
  } 
} 
</ スクリプト>

この時、バック再要求するその他の詳細ページ、ID発見要求または0001、およびないを再入力してください。私たちは、キープアライブを使用するので、その有効ライフサイクルフックを使用します。

活性化された（）{
     この.getDetailInfo（）
  }、

以下はまた、この問題を解決するための別の方法を変更することができます：=「コンポーネント名を」除外します

オープンApp.vueファイル：

< テンプレート> 
  < div要素のid = "アプリ" > 
    < キープアライブは除外= "詳細" > 
      < ルータビュー/> 
    </ キープアライブ> 
  </ DIV > 
</ テンプレート>

詳細は別にコンポーネント名から、他のページがキャッシュされていると言われています。

注：ある問題が、ありますが、オリジナルで使用Header.vueファイルのライフサイクルメソッドが起動されますが、バックマウントと、それを変更するには、キャッシュをキャンセルした、それ以外の場合は動作しません。

詳細ページからのバックホームをリフレッシュした後、その後、詳細を入力するために別のページをクリックしするAJAX要求を再開始しました。

内の各ページの名前は、三つの目的があることを知っています：

1.名前を使用しますが、再帰的なコンポーネントを使用します

2.ページのキャッシュをキャンセルしたい、また、使用される名前

Vue.js 3.ブラウザを使用して、名前コンポーネント名が表示されますヴューの、プラグインデベロッパーツール

小さなバグもあります：ページが時間の途中でスクロールされたときに、中間位置でも詳細を開くには、詳細ページにページをクリックし、しかし。私たちは、それぞれの新しいページの最上部に、ページに入ることを願っています。

スクロール挙動

新しいルートへの切り替え時にフロントエンドルーティングを使用するには、ページの上部をロール、または元のスクロール位置を維持し、同じようにページをリロードします。VUE-ルータが行うことができますが、より良い、それがページにどのようにスクロールするようにスイッチをルーティングするカスタムをことができます。

注：この機能はサポートhistory.pushStateブラウザで利用可能です。

オープンルートファイルIndex.js、追加します。

scrollBehavior（savedPosition、からへ）{
   戻り {X：0、Y：0 } 
}

[OK]を、機能を実現しました。

その後、いくつかのコンテンツ自身を追加します。

< テンプレート> 
< divの> 
  < divのクラス= "項目" V-のための"リストの中（項目、インデックス）" = ：キー= "インデックス" > 
    < divのクラス= "項目タイトルのborder-bottom" > 
      < スパンクラス= "項目タイトルアイコン" > </ スパン> 
      {{item.title}} 
    </ DIV > 
    < DIV V-IF = "item.int" クラス= "項目-INT" > {{item.int}} < / DIV >
    < divのV-IF = "item.openTime"クラス= "項目OPENTIME" > {{item.openTime}} </ DIV > 
    < DIV V-IF = "item.tel" クラス= "項目-TEL" > {{item.tel}} </ DIV > 
    < DIV V-IF = "item.address" クラス= "項目アドレス" > {{item.address}} </ DIV > 
    < DIV クラス= "項目子" V-IF = "item.children" > 
      < 詳細-list ：リスト= "item.children" > </ 詳細リスト> 
    </ divの> 
  </ DIV > 
</ DIV > 
</ テンプレート>

レンダリング：

コードの下でファイル：

追加gitの。
コミットgitの "-m データ」への詳細ページのダイナミックアクセス完了するために
プッシュgitのを

gitのチェックアウトのマスターは
、AJAXの詳細をマージするgitの
gitのプッシュ

データへのVue2.5 23観光プロジェクトインスタンスの詳細ページのAjaxダイナミックアクセス

スクロール挙動

おすすめ