Vue.jsルーティング

この記事ではVue.jsルーティングを説明します。

Vue.jsルーティングを使用すると、さまざまなURLによってさまざまなコンテンツにアクセスできます。

Vue.jsで複数のビューを持つシングルページのWebアプリケーション(SPA)を実現できます。

Vue.jsルーティングをvue-routerライブラリにロードする必要がある

インストール

CDNをダウンロードする

https://unpkg.com/vue-router/dist/vue-router.js

NPM

npm install vue-router

簡単な例

Vue.js+vue-routerは、シングルページアプリケーションを簡単に実装できます。

は、ナビゲーションリンクを設定し、異なるHTMLコンテンツを切り替えるために使用されるコンポーネントです。 to属性は、表示されるコンテンツであるターゲットアドレスです。

次の例では、vue-routerを追加し、コンポーネントとルーティングを構成してから、それらをレンダリングする場所をvue-routerに指示します。 コードは次のとおりです。

HTMLコード

<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- router-linkコンポーネントを使用してナビゲートする. -->
    <!-- `to`属性を渡してリンクを指定する. -->
    <!--<router-link>はデフォルトで `<a>`タグとしてレンダリングされる -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- ルーティング出口 -->
  <!-- ルーティングと一致するコンポーネントはここにレンダリングされる -->
  <router-view></router-view>
</div>

JavaScriptコード

// 0. モジュラープログラミングを使用してVueとVueRouterをインポートする場合は、Vue.use(VueRouter)を呼び出す必要がある

// 1. コンポーネント(ルーティング)を定義する
// 他のファイルからインポートできる
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. ルーティングを定義する
// 各ルーティングはコンポーネントをマップする必要がある。"component"は
// Vue.extend()によって作成されたコンポーネントコンストラクターであることが可能だ。
// また、ただコンポーネント構成オブジェクトだ。
// ネストされたルーティングについては後で説明する。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. routerインスタンスを作成し、 `routes`構成を渡す
// 他の構成引数を渡すこともできますが、最初にそれでいいだ。
const router = new VueRouter({
  routes // (省略形)routes: routesと同じだ。
})

// 4. ルートインスタンスを作成してマウントする。
// router構成引数によってルーティングを挿入することを忘れないでください。
// これより、アプリケーション全体にルーティング機能がある。
const app = new Vue({
  router
}).$mount('#app')

// これで、アプリケーションが起動されている。

クリックされたナビゲーションリンクのスタイル はclass= “router-link-exact-activerouter-link-active”になります。

<router-link>関連属性

次には、<router-link>の属性について詳しく説明します。

to

ターゲットルーティングのリンクを表します。 クリックすると、内部からtoの値をrouter.push()に渡されるため、この値は、ターゲットの場所を説明する文字列またはオブジェクトにすることができます。

<!-- 文字列 -->
<router-link to="home">Home</router-link>
<!-- レンダリング結果 -->
<a href="home">Home</a>

<!-- v-bindを使用したJS式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 他のプロパティをバインドするのと同じように、v-bindを記述しなくても大丈夫だ -->
<router-link :to="'home'">Home</router-link>

<!-- 上記と同様だ -->
<router-link :to="{ path: 'home' }">Home</router-link>

<!-- 名前付きルーティング -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-クエリ引数で次の結果が得られる/register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

replace

replace属性が設定されている場合、クリックするとrouter.push()ではなく、router.replace()が呼び出され、ナビゲーション後にhistory(履歴)は残りません。

<router-link :to="{ path: '/abc'}" replace></router-link>

Append

append属性を設定した後、現在の(相対)パスの前にそのパスを追加します。例えば、/aから相対パスbに移動します。appendが構成されていない場合、パスは/bであり、構成されている場合、パスは/a/bです。

<router-link :to="{ path: 'relative/path'}" append></router-link>

tag

<router-link>を<li>などのタグとしてレンダリングしたい場合、tag propクラスでタグの種類を指定しても、クリックをリッスンしてナビゲーションをトリガーします。

<router-link to="/foo" tag="li">foo</router-link>
<!-- レンダリング結果 -->
<li>foo</li>

active-class

リンクがアクティブ化されるときに使用されるCSSクラス名を設定します。 次のコードに置き換えることができます。

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

classはactive-class=”active”を使用することに注意してください。

exact-active-class

リンクが完全に一致したときにアクティブ化する必要がある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>

event

ナビゲーションをトリガーできるイベントを宣言します。文字列または文字列を含む配列になります。

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

上記のコードはeventをmouseoverに設定し、マウスがRouter Link1に移動するとナビゲーションのHTMLコンテンツが変更されます。

NPMルーティングの例

次に、npmを使用した簡単なルーティングの例を示します。開始する前に、例のソースコードをダウンロードしてください。

https://github.com/chrisvfritz/vue-2.0-simple-routing-example

ダウンロードした後、ディレクトリを解凍し、ディレクトリの名前をvue-demo,vuに変更してディレクトリに入り、次のコマンドを実行します。

# npm依存関係をインストールする
npm install

# アプリケーションを起動する。ルートはlocalhost:8080
npm run dev

公式に公開する必要がある場合は、次のコマンドを実行します。

npm run build

実行が成功した後、http://localhost:8080にアクセスして、次のインターフェイスが表示されます。

Share

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です