Vue Router(ビュールータ)

7181 ワード
テキストリンク

SPAについて


通常、Webアプリケーションはサーバに対応するWebページを要求し、サーバがhtmlに戻るとレンダリングエンジンで湖面に表示されます.
SPAは、画面に関する情報を事前に取得し、画面切り替え時にサーバに要求するのではなくクライアント内部でルータを使用して(データを受信しない)画面切り替えをスムーズに行うことができる.
  • Vueは、コアライブラリ以外のRouterライブラリを正式にサポートし、以下のようにインストールされます.
    • npm install vue-router [--save]
  • Vueルータは基本的にRootUrl/{Routername}の構造です.
    • npm install vue-router [--save]
  • では、タグ値に加えてデフォルトのURLでインデックスが要求されます.
    • htmlを受信してルーティングする
    const router = new VueRouter({
routes,
//아래와 같이 history 모드를 추가해주면 된다.
mode: 'history'
})

    デフォルトルータ

  • ビューのルーティング機能を使用するにはroute-linkタグを使用します.これはaタグ
    • に変換する.
  • index.html 
    • <!DOCTYPE html>
<html>
 <head>
   <meta charset="urf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Vue Router Sample</title>
  </head>
  <body>
   <div id="app">
    <h1>Hello Vue Router!</h1>
    <p>
     <router-link to="/foo">Go to Foo</router-link>
     <router-link to="/bar">Go to Bar</router-link>
    </p>
    <router-view></router-view>
   </div>
   
<script src="js/vendor/vue.js"></script>
<script src="js/vendor/vue-router.js"></script>
<script src="js/app.js"></script>
  • app.jsコンポーネントを定義し、htmlで定義された各ルーティングパスにコンポーネントをマッピングするパスを定義し、ビュールータインスタンスを作成し、ビュールートインスタンスを作成しながらルータをマウントします.
    • トウィッチ2
    Ubuntuにはaptでgolangをインストール