Vue: principio de enrutamiento (hash)

Codificar directamente

• Escribe algo en la página

<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>

• El primero se muestra por defecto, que es la página de inicio.

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

• Eche un vistazo al efecto página
• Ahora necesita cumplir con los requisitos, haga clic enenLa página muestra aproximadamente y al mismo tiempoURLTambién muestra la etiqueta a correspondientehrefContenido

• porhashchangeCambiar eventos para cumplir con este requisito
• picadillo¿Se muestra la URL en la página?
• MuchoSiEl juicio es dejar que se muestre el texto correspondiente
• Document.getElementById no se usa porque se puede usar directamente cuando el elemento es el único elemento en la página

  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';
    }
  } 

• Eche un vistazo al impresopicadillo

• Eche un vistazo al efecto página

Salto de enrutamiento Vue (juego positivo)

• ¿Te suena familiar?
• Así es como se configura vue para el enrutamiento
• caminoSe muestra en la barra de direcciones.URL
• componenteNecesita ser mostradopágina, Aquí están esos divs

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

• El código js correspondiente

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; //匹配到之后跳出循环，提高性能
    }
  }
}

• Mira si el efecto es el mismo