Vuejs-routing
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と一緒にスクリプトタグで使用できます-
NPMを使用する
次のコマンドを実行して、vue-routerをインストールします。
GitHubを使用する
次のようにGitHubからリポジトリを複製できます-
vue-router.jsを使用した簡単な例から始めましょう。
例
出力
ルーティングを開始するには、vue-router.jsファイルを追加する必要があります。 https://unpkg.com/vue-router/dist/vue-router.jsからコードを取得して保存しますファイルvue-router.jsにあります。
スクリプトは次のようにvue.jsの後に追加されます-
本体セクションには、次のように定義されたルーターリンクがあります-
上記のコードでは、2つのルーターリンクを作成しました。
ルータが初期化されるスクリプトセクションを見てください。 次のように作成された2つの定数があります-
これらにはテンプレートがあり、ルーターリンクがクリックされたときに表示する必要があります。
次に、routes constがあります。これは、URLに表示されるパスを定義します。
ルートはパスとコンポーネントを定義します。 パス、つまり ユーザーがルーターリンクをクリックすると、URLに /route1 が表示されます。
コンポーネントは、表示されるテンプレート名を受け取ります。 ルートからのパスは、プロパティへのルーターリンクと一致する必要があります。
たとえば、<router-link * to =” path here” *> </router-link>
次に、次のコードを使用してVueRouterにインスタンスが作成されます。
VueRouterコンストラクターは、ルートをパラメーターとして受け取ります。 ルーターオブジェクトは、次のコードを使用してメインvueインスタンスに割り当てられます。
サンプルを実行し、ブラウザで表示を確認します。 ルーターリンクを調べて確認すると、次のスクリーンショットに示すように、アクティブな要素にクラスが追加されていることがわかります。
追加されるクラスは class =“ router-link-exact-active router-link-active” です。 アクティブリンクは、上記のスクリーンショットに示すようにクラスを取得します。 注目すべきもう1つの点は、<router-link>がタグとしてレンダリングされることです。
ルーターリンクの小道具
<router-link>に渡されるいくつかのプロパティを見てみましょう。
to
これは、<router-link>に指定された宛先パスです。 クリックすると、toの値が内部的にrouter.push()に渡されます。 値は文字列または場所オブジェクトである必要があります。 オブジェクトを使用するときは、例えば 2.
以下は、たとえば 3.
URLパスでは、name = Teryはクエリ文字列の一部です。 例:http://localhost/vueexamples/vue_routerl#/route1?name = Tery
交換する
ルーターリンクに置換を追加すると、* router.push()の代わりに router.replace()*が呼び出されます。 置換すると、ナビゲーション履歴は保存されません。
例
追加する
<router-link> <router-link>にappendを追加すると、パスが相対になります。
パス/route1のルーターリンクからルーターリンクパス/route2に移動する場合は、ブラウザーに/route1/route2としてパスが表示されます。
例
tag
現在、<router-link>はタグとしてレンダリングされます。 他のタグとしてレンダリングしたい場合は、tag =” tagname”を使用して同じことを指定する必要があります。
例
タグをspanとして指定しました。これがブラウザに表示されます。
現在表示されているタグは、spanタグです。 ナビゲーションのためにルーターのリンクをクリックすると、クリックが引き続き表示されます。
アクティブクラス
デフォルトでは、ルーターリンクがアクティブなときに追加されるアクティブクラスはrouter-link-activeです。 次のコードに示すように同じものを設定することにより、クラスを上書きできます。
使用されるクラスはactive_class =” _active”です。 これは、ブラウザに表示される出力です。
正確にアクティブなクラス
適用されるデフォルトのexactactiveクラスはrouter-link-exact-activeです。 exact-active-classを使用して上書きできます。
例
これはブラウザに表示されるものです。
イベント
現在、ルーターリンクのデフォルトのイベントはクリックイベントです。 イベントプロパティを使用して同じように変更できます。
例
これで、ルーターリンクにマウスを合わせると、次のブラウザーに示すように移動します。 ルーターリンク1にカーソルを合わせると、ナビゲーションが変化します。