Vue：ルーティングの原則（ハッシュ）

直接コーディング

• ページに何か書く

<p><a href="#/home">首页</a>|<a href="#/about">关于</a>|<a href="#/info">信息</a></p>
<div id="home">
  <h1>首页</h1>
</div>
<div id="about">
  <h1>关于</h1>
</div>
<div id="info">
  <h1>信息</h1>
</div>

• 最初のものはデフォルトで表示されます、それはホームページです

<style>
  #about {
     
     
    display: none;
  }
  #info {
     
     
    display: none;
  }
</style>

• ページ効果を見てください
• 次に、要件を達成する必要があります。オンこのページは、同時に、同時にURL対応するタグも表示hrefコンテンツ

• 沿ってhashchangeこの要件を満たすようにイベントを変更する
• ハッシュページに表示されているURL
• たくさんもし判断は対応するテキストを表示させることです
• Document.getElementByIdは、要素がページ上の唯一の要素である場合に直接使用できるため、使用されません。

  window.onhashchange = function (e) {
    
    
    let hash = window.location.hash;
    console.log(hash) // 打印出来hash看一下
    if (hash == '#/home') {
    
      
      home.style.display = 'block';
      about.style.display = 'none';
      info.style.display = 'none';
    } else if (hash == '#/about') {
    
    
      home.style.display = 'none';
      about.style.display = 'block';
      info.style.display = 'none';
    } else if (hash == '#/info') {
    
    
      home.style.display = 'none';
      about.style.display = 'none';
      info.style.display = 'block';
    }
  } 

• 印刷物を見てくださいハッシュ

• ページ効果を見てください

Vueルーティングジャンプ（ポジティブプレイ）

• 親しみを感じますか？
• これは、ルーティング用にvueを構成する方法です
• 道アドレスバーに表示されますURL
• 成分表示する必要がありますページ、ここにそれらのdivがあります

const router = [
  {
    
    path:'#/home',component:home},
  {
    
    path:'#/about',component:about},
  {
    
    path:'#/info',component:info}
]

• 対応するjsコード

let currentView = router[0]; // 默认显示第一个页面

window.onhashchange = function(e) {
    
    
  for(let i = 0; i < router.length; i++) {
    
    
    if(location.hash == router[i].path) {
    
     // 如果URL匹配到
      currentView.component.style.display = 'none'; // 关闭默认显示的页面
      router[i].component.style.display = 'block'; // 显示匹配到的页面
      currentView = router[i]; // 更改默认显示的页面为当前页面
      break; //匹配到之后跳出循环，提高性能
    }
  }
}

• 効果が同じかどうかを確認します