Vuejs-routing
VueJS-ルーティング
VueJSには、組み込みのルーター機能がありません。 それをインストールするには、いくつかの追加手順に従う必要があります。
CDNからの直接ダウンロード
vue-routerの最新バージョンは、https://unpkg.com/[email protected]/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-routerGitHubを使用する
次のようにGitHubからリポジトリを複製できます-
git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run buildvue-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>出力
ルーティングを開始するには、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にカーソルを合わせると、ナビゲーションが変化します。
