VueJS-ルーティング

VueJSにはルーター機能が組み込まれていません。それをインストールするには、いくつかの追加の手順に従う必要があります。

CDNからの直接ダウンロード

vue-routerの最新バージョンは次のURLで入手できます。 https://unpkg.com/vue-router/dist/vue-router.js

Unpkg.comは、npmベースのcdnリンクを提供します。上記のリンクは常に最新バージョンに更新されます。ダウンロードしてホストし、次のようにvue.jsと一緒にスクリプトタグで使用できます-

<script src = "/path/to/vue.js"></script>
<script src = "/path/to/vue-router.js"></script>

NPMの使用

次のコマンドを実行して、vue-routerをインストールします。

npm  install vue-router

GitHubの使用

次のようにGitHubからリポジトリのクローンを作成できます-

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

vue-router.jsを使用した簡単な例から始めましょう。

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
      <script type = "text/javascript" src = "js/vue-router.js"></script>
   </head>
   <body>
      <div id = "app">
         <h1>Routing Example</h1>
         <p>
            <router-link to = "/route1">Router Link 1</router-link>
            <router-link to = "/route2">Router Link 2</router-link>
         </p>
         <!-- route outlet -->
         <!-- component matched by the route will render here -->
         <router-view></router-view>
      </div>
      <script type = "text/javascript">
         const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' }
         const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
         const routes = [
            { path: '/route1', component: Route1 },
            { path: '/route2', component: Route2 }
         ];
         const router = new VueRouter({
            routes // short for `routes: routes`
         });
         var vm = new Vue({
            el: '#app',
            router
         });
      </script>
   </body>
</html>

Output

ルーティングを開始するには、vue-router.jsファイルを追加する必要があります。からコードを取得しますhttps://unpkg.com/vue-router/dist/vue-router.js そしてそれをファイルvue-router.jsに保存します。

スクリプトは次のようにvue.jsの後に追加されます-

<script type = "text/javascript" src = "js/vue.js"></script>
<script type = "text/javascript" src = "js/vue-router.js"></script>

本文セクションには、次のように定義されたルーターリンクがあります。

<p>
   <router-link   to = "/route1">Router Link 1</router-link>
   <router-link    to = "/route2">Router Link 2</router-link>
</p>

<router-link>ユーザーに表示されるHTMLコンテンツに移動するために使用されるコンポーネントです。toプロパティは宛先です。つまり、表示されるコンテンツが選択されるソースファイルです。

上記のコードでは、2つのルーターリンクを作成しました。

ルーターが初期化されるスクリプトセクションを見てください。次のように作成された2つの定数があります-

const  Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' };
const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }

テンプレートがあり、ルーターのリンクをクリックしたときに表示する必要があります。

次はroutesconstで、URLに表示されるパスを定義します。

const routes = [
   { path: '/route1', component: Route1 },
   { path: '/route2', component: Route2 }
];

ルートはパスとコンポーネントを定義します。パスすなわち/route1 ユーザーがルーターのリンクをクリックすると、URLに表示されます。

コンポーネントは、表示されるテンプレート名を取得します。ルートからのパスは、プロパティへのルーターリンクと一致する必要があります。

たとえば、<router-link to = ”path here”> </ router-link>

次に、次のコードを使用して、VueRouterに対してインスタンスが作成されます。

const router = new VueRouter({
   routes // short for `routes: routes`
});

VueRouterコンストラクターは、ルートをパラメーターとして受け取ります。ルーターオブジェクトは、次のコードを使用してメインのvueインスタンスに割り当てられます。

var vm = new Vue({
   el: '#app',
   router
});

例を実行して、ブラウザに表示を確認します。次のスクリーンショットに示すように、ルーターリンクを調べて確認すると、アクティブな要素にクラスが追加されていることがわかります。

追加されたクラスは class = “router-link-exact-active router-link-active”。上のスクリーンショットに示すように、アクティブなリンクはクラスを取得します。もう1つの注意点は、<router-link>がタグとしてレンダリングされることです。

ルーターリンクの小道具

<router-link>に渡されるプロパティをさらにいくつか見てみましょう。

これは、<router-link>に指定された宛先パスです。クリックすると、toの値が内部でrouter.push()に渡されます。値は文字列またはロケーションオブジェクトである必要があります。オブジェクトを使用する場合、たとえば2に示すようにオブジェクトをバインドする必要があります。

e.g. 1:  <router-link to = "/route1">Router Link 1</router-link>
renders as
<a href = ”#/route”>Router Link </a>
e.g. 2:  <router-link v-bind:to = "{path:'/route1'}">Router Link 1</router-link>
e.g. 3: <router-link v-bind:to =
   "{path:'/route1', query: { name: 'Tery' }}">Router Link 1</router-link>//router link with query string.

以下は、例えば3の出力です。

URLパスでは、name = Teryはクエリ文字列の一部です。例:http://localhost/vueexamples/vue_router.html#/route1?name = Tery

交換

ルーターリンクにreplaceを追加すると、 router.replace() の代わりに router.push()。replaceを使用すると、ナビゲーション履歴は保存されません。

Example

<router-link v-bind:to = "{path:'/route1', query: { name: 'Tery' }}"   replace>Router Link 1</router-link>

追加

<router-link> <router-link>にappendを追加すると、パスが相対パスになります。

パス/ route1のルーターリンクからルーターリンクパス/ route2に移動する場合、ブラウザーに/ route1 / route2としてパスが表示されます。

Example

<router-link v-bind:to = "{ path: '/route1'}" append>Router Link 1</router-link>

鬼ごっこ

現在、<router-link>はタグとしてレンダリングされます。他のタグとしてレンダリングしたい場合は、tag =” tagname”;を使用して同じものを指定する必要があります。

Example

<p>
   <router-link v-bind:to = "{ path: '/route1'}" tag = "span">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

タグをスパンとして指定しました。これがブラウザに表示されます。

現在表示されているタグはスパンタグです。ナビゲーションのためにルーターのリンクをクリックすると、クリックが進行します。

アクティブクラス

デフォルトでは、ルータリンクがアクティブなときに追加されるアクティブクラスはrouter-link-activeです。次のコードに示すように設定することで、クラスを上書きできます。

<style>
   ._active{
      background-color : red;
   }
</style>
<p>
   <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

使用されるクラスはactive_class =” _active”です。これはブラウザに表示される出力です。

正確なアクティブクラス

適用されるデフォルトのexactactiveクラスはrouter-link-exact-activeです。正確なアクティブクラスを使用して上書きできます。

Example

<p>
   <router-link v-bind:to = "{ path: '/route1'}" exact-active-class = "_active">Router Link 1</router-link>
   <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
</p>

これがブラウザに表示されるものです。

イベント

現在、router-linkのデフォルトイベントはクリックイベントです。イベントプロパティを使用して同じものを変更できます。

Example

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

これで、ルーターリンクにマウスを合わせると、次のブラウザーに示すように移動します。ルーターリンク1にマウスを合わせると、ナビゲーションが変化します。