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-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を使用した簡単な例から始めましょう。
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にマウスを合わせると、ナビゲーションが変化します。
