Vuejs-routing

提供：Dev Guides
移動先:案内、検索

VueJS-ルーティング

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

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

vue-routerの最新バージョンは、https://unpkg.com/vue-router@3.0.1/dist/vue-router.js [[[1]] 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を使用した簡単な例から始めましょう。

例 

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

出力

Route1 Link

Route2 Link

ルーティングを開始するには、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>' }

これらにはテンプレートがあり、ルーターリンクがクリックされたときに表示する必要があります。

次に、routes constがあります。これは、URLに表示されるパスを定義します。 

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

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

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

たとえば、<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>に渡されるいくつかのプロパティを見てみましょう。

to

これは、<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_routerl＃/route1？name = Tery

交換する

ルーターリンクに置換を追加すると、* router.push（）の代わりに router.replace（）*が呼び出されます。 置換すると、ナビゲーション履歴は保存されません。

例 

<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としてパスが表示されます。

例 

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

tag

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

例 

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

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

タグ

現在表示されているタグは、spanタグです。 ナビゲーションのためにルーターのリンクをクリックすると、クリックが引き続き表示されます。

アクティブクラス

デフォルトでは、ルーターリンクがアクティブなときに追加されるアクティブクラスは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です。 exact-active-classを使用して上書きできます。

例 

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

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

デフォルトイベント

「https://www.finddevguides.com/index.php?title=Vuejs-routing&oldid=13968」から取得
Powered by MediaWiki