Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung des Single-Page-Routings des Vue-Routers

怪我咯
Freigeben: 2017-07-04 15:04:03
Original
1912 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich die relevanten Informationen zum Vue-Router-Einzelseiten-Routing im Detail vorgestellt. Interessierte Freunde können sich auf

vue beziehen Klassenbibliothek namens vue-router, die für das Single-Page-Routing verwendet wird. Das Routing ist im Allgemeinen in vier Schritte unterteilt:

  • Vorbereiten einer Stammkomponente vue.extend();

  • Vorbereiten einer Vorlage für den Inhalt, der benötigt wird geroutet werden ;

  • Route vorbereiten neuer VueRouter();

  • Zugehörige Routenkarte

  • Start route start (App,'#box'); // Der erste Parameter ist die vorbereitete Stammkomponente und der zweite Parameter ist der Ort, der in der von Ihnen definierten ID gebündelt werden soll

Vue-Router-Download-Adresse auf Github: https://github.com/vuejs/vue-router

Der einfache Code für den Routensprung lautet wie folgt:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/vue.js" ></script>
    <script type="text/javascript" src="js/vue-router.js" ></script>
    <script type="text/javascript" src="js/vue-resource.js" ></script>
    <title></title>
  </head>
  <body>
    <p id="box">
      <ul>
        <li>
          <a v-link="{path:&#39;/home&#39;}">我是第一个a</a>
        </li>
        <li >
          <a v-link="{path:&#39;news&#39;}">我是第二个a</a>
        </li>
      </ul>
      <p>
        <router-view></router-view>
      </p>
    </p>
  </body>
  <script>
    //1.准备一个根组件
    var App=Vue.extend();
    
    //2.Home News 组件准备
    var Home=Vue.extend({
      template:&#39;<h3>我是第一个a的内容页</h3>&#39;
    });
    
    var News=Vue.extend({
      template:&#39;<h3>我是第二个a的内容页</h3>&#39;
    })
    
    //3.准备路由
    var router = new VueRouter();
    
    //4.关联
    
    router.map({
      &#39;home&#39;:{
        component:Home
      },
      &#39;news&#39;:{
        component:News
      }
    })
    
    //5.启动路由
    
    router.start(App,&#39;#box&#39;);
  </script>
</html>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Single-Page-Routings des Vue-Routers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage