Vueルータから始める

VueJSはダイナミックなJavaScriptユーザインタフェースを構築するためのフレームワークです.私がVueについて最も好きであるもの.JSは、それを始めるのがとても簡単であるということです.お客様のニーズに応じて、単にあなたのページに小さなスクリプトのタグを追加する必要があり、Vueの美しさの膨大な量を受け入れることができます.
ちょうどあなたが知らなかった場合、VueルータはVueです.あなたのアプリケーションにルーティングを加えるJSプラグイン.この例では、私はあなたとVueルータをインストールしてセットアップを取得する方法については少し時間がないのビルドを開始することができますビットを共有します.

インストール
インストールできますvue-router NPMや糸を使用します.単に次のコマンドを端末で実行してください.npm install vue-routeroryarn add vue-router
設定する
モジュールシステムを使用する場合、Vueを伝える必要があります.それはVuerouterプラグインを使用する必要があります.

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

import router from './router';

const app = new Vue({
    el: '#app',
    router, // same as router: router
});

Vueルータプラグインを使用するVueを設定した後に、親コンポーネントにそのルータインスタンスを使用する必要があることを知らせなければなりません.
前の手順に従って、あなたが今しているvue-router インストールされて、構成されて、あなたのルーティング構成を構築し始めることができます.

アプリケーションの構造
多くの方法でアプリケーションを構築することができますが、私は主に次のように選択します.

私はrouter/ 私がスクリプトを保つディレクトリの中のフォルダ.

インサイドrouter/ フォルダ、2つのファイルを作成します.index.js and routes.js

index.jsまず、このファイルインデックスを選択します.モジュールシステムを使用するとき、単に以下のコマンドを使用してインポートできます.import router from './router' . モジュールシステムが1を探すので、ファイル名を指定する必要はありませんindex.js デフォルトでファイル.

// router/index.js
import VueRouter from 'vue-router'; //Import vue-router
import routes from './routes'; // Import my routes

//Export a new VueRouter instance
export default new VueRouter({
    mode: 'history',
    base: '/home/',
    routes,
});

彼らは、一見してあなたに明らかでないかもしれないここの若干のものです.それぞれ説明しましょう.
The mode デフォルトの属性は# URLへ.私の場合はhistory モードは、それを防ぐためにも歴史を活用する.PushState APIは、ページの再読み込みせずにURLナビゲーションを実現する.
The base 属性は、すべてのルートが広がるベースURLセクションを設定することです.例えば、我々がルートを設定するなら/dashboard , Vueルータは実際にURLを探すでしょう/home/dashboard .
これらの属性の両方を省略できます.

// router/routes.js

// Here we import our Vue Components
import DashboardPage from '../pages/Dashboard.vue';
import Error404 from '../pages/errors/Error404.vue';

// the routes are simply an array of objects
const routes = [
    {
        path: '/',
        redirect: '/dashboard'
    },
    {
        path: '/dashboard',
        name: 'dashboard',
        component: DashboardPage
    },
    {
        path: '*',
        name: '404',
        component: Error404
    }
];

export default routes;

ルートオブジェクトのほとんどは、少なくとも2つの属性を持つ必要がありますpath マッチしてcomponent そのパスがマッチするとき、それは表示されなければなりません.
そのワイルドカードを持つ配列の最後のオブジェクト* パスとして、マッチしなかったルートの404ページを表示するのに使用されます.あなたはそれを持っている必要はありません、それはちょうどルータで404エラーを扱う方法の例です.

を、私はセットアップを持って、どのように今私はそれを使用しますか?
あなたが定義したルートをナビゲートするのは、2つの特別な要素Vue Router<router-link></router-link> and <router-view></router-view> .
The router-link コンポーネントのレンダリングa タグ.あなたはどんな要素をレンダリングするかを指定できますtag プロパティ.The to プロパティは、要素がクリックされた後にどのルートを辿るべきかを指定するために使用されます.

<ul>
    <router-link tag="li" to="/dashboard" class="list-group-item">
        Dashboard
    </router-link>
</ul>

各コンポーネントをページに表示する前に、<router-view> 要素.この要素の使用は非常にまっすぐです単にあなたのコンポーネントがマウントされたいページのどこにでも要素を追加します.

<div class="row">
    <div class="col-md-12">
        <!--All components will be mounted here-->
        <router-view></router-view>
    </div>
</div>

結論
VueJSはJavaScriptのフレームワークを使用して非常に簡単です、そしてそれはルーターのプラグインは、もう一度これを証明している.わずか数秒では、簡単にJavascriptのルータをインストールすることができます、構成、およびアプリケーションで作業する.
このポストで何か見逃したものはありますか.それを私と共有