Vueルーター

Vueアプリケーションの重要な部分の1つであるVueルーターの使用方法

前書き

JavaScript Webアプリケーションでは、ルーターは現在表示されているビューをブラウザーのアドレスバーのコンテンツと同期する部分です。

つまり、ページ内の何かをクリックしたときにURLを変更し、特定のURLにアクセスしたときに正しいビューを表示するのに役立つ部分です。

従来、WebはURLを中心に構築されていました。特定のURLにアクセスすると、特定のページが表示されます。

ブラウザ内で実行され、ユーザーに表示される内容を変更するアプリケーションの導入により、多くのアプリケーションがこの対話を中断し、ブラウザのHistoryAPIを使用してURLを手動で更新する必要がありました。

アプリのビューにURLを同期する必要がある場合は、ルーターが必要です。これは非常に一般的なニーズであり、すべての主要な最新のフレームワークでルーティングを管理できるようになりました。

Vueルーターライブラリは、Vue.jsアプリケーションを利用する方法です。 Vueはこのライブラリの使用を強制しません。必要な汎用ルーティングライブラリを使用することも、独自のHistory API統合を作成することもできますが、Vueルーターを使用する利点は次のとおりです。公式

つまり、Vueを管理しているのと同じ人が管理しているため、フレームワークでより一貫性のある統合が可能になり、将来的には常に互換性があることが保証されます。

インストール

Vueルーターはnpm名前の付いたパッケージでvue-router

スクリプトタグを介してVueを使用する場合は、を使用してVueルーターを含めることができます

<script src="https://unpkg.com/vue-router"></script>

unpkg.comは、すべてのnpmパッケージを簡単なリンクでブラウザーで利用できるようにする非常に便利なツールです。

あなたが使用する場合Vue CLI、を使用してインストールします

npm install vue-router

インストールしたらvue-routerスクリプトタグまたはVueCLIを使用して利用できるようにすると、アプリにインポートできるようになります。

後でインポートしますvue、そしてあなたは電話しますVue.use(VueRouter)インストールアプリ内で:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

電話した後Vue.use()ルーターオブジェクトを渡すと、アプリの任意のコンポーネントで次のオブジェクトにアクセスできます。

  • this.$routerルーターオブジェクトです
  • this.$route現在のルートオブジェクトです

ルーターオブジェクト

を使用してアクセスされるルーターオブジェクトthis.$routerVueルーターがルートVueコンポーネントにインストールされている場合、任意のコンポーネントから、多くの優れた機能を提供します。

を使用してアプリを新しいルートにナビゲートさせることができます

  • this.$router.push()
  • this.$router.replace()
  • this.$router.go()

に似ていますpushStatereplaceStateそしてgoHistoryAPIのメソッド。

push()新しいルートに移動し、ブラウザの履歴に新しいアイテムを追加するために使用されます。replace()新しい状態を履歴にプッシュしないことを除いて、同じです。

使用例:

this.$router.push('about') //named route, see later
this.$router.push({ path: 'about' })
this.$router.push({ path: 'post', query: { post_slug: 'hello-world' } }) //using query parameters (post?post_slug=hello-world)
this.$router.replace({ path: 'about' })

go()履歴に戻るために正または負になる可能性のある数値を受け入れて、前後に移動します。

this.$router.go(-1) //go back 1 step
this.$router.go(1) //go forward 1 step

ルートの定義

私は使用していますVueシングルファイルコンポーネントこの例では。

テンプレートでは、nav tag that has 3 router-linkラベル(ホーム/ログイン/バージョン情報)とURLを介して割り当てられたコンポーネントto属性。

ザ・router-viewコンポーネントは、Vueルーターが現在のURLに一致するコンテンツを配置する場所です。

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/login">Login</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

Arouter-linkコンポーネントはレンダリングしますaデフォルトでタグを付けます(変更できます)。リンクをクリックするかURLを変更することにより、ルートが変更されるたびに、router-link-activeアクティブルートを参照する要素にクラスが追加され、スタイルを設定できるようになります。

In the JavaScript part we first include and install the router, then we define 3 ルートコンポーネント

それらを初期化に渡しますrouterオブジェクトであり、このオブジェクトをVueルートインスタンスに渡します。

コードは次のとおりです。

<script>
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = { template: ‘<div>Home</div>’ }

const Login = { template: ‘<div>Login</div>’ }

const About = { template: ‘<div>About</div>’ }

const router = new VueRouter({ routes: [ { path: ‘/’, component: Home }, { path: ‘/login’, component: Login }, { path: ‘/about’, component: About } ] })

new Vue({ router }).$mount(’#app’) </script>

通常、Vueアプリでは、以下を使用してルートアプリをインスタンス化してマウントします。

new Vue({
  render: h => h(App)
}).$mount('#app')

Vueルーターを使用する場合、renderプロパティが、代わりに、router

上記の例で使用されている構文:

new Vue({
  router
}).$mount('#app')

の省略形です

new Vue({
  router: router
}).$mount('#app')

例を参照してください。routesへの配列VueRouterコンストラクタ。この配列の各ルートには、pathそしてcomponentparams。

合格した場合nameparamも、あなたは名前付きルート

名前付きルートを使用してパラメーターをルーターのpushおよびreplaceメソッドに渡す

以前にRouterオブジェクトを使用して新しい状態をプッシュした方法を覚えていますか?

this.$router.push({ path: 'about' })

名前付きルートを使用して、新しいルートにパラメーターを渡すことができます。

this.$router.push({ name: 'post', params: { post_slug: 'hello-world' } })

同じことが言えますreplace()

this.$router.replace({ name: 'post', params: { post_slug: 'hello-world' } })

アプリケーションは、リンクに渡されたURLに一致するルートコンポーネントをレンダリングします。

URLを処理する新しいルートコンポーネントがインスタンス化され、そのガードが呼び出され、古いルートコンポーネントが破棄されます。

ルートガード

言及したので警備員、紹介しましょう。

それらはライフサイクルフックまたはミドルウェアと考えることができます。これらは、アプリケーションの実行中の特定の時間に呼び出される関数です。ジャンプしてルートの実行を変更し、リクエストをリダイレクトまたはキャンセルできます。

にコールバックを追加することで、グローバルガードを持つことができますbeforeEach()そしてafterEach()ルーターのプロパティ。

  • beforeEach()ナビゲーションが確認される前に呼び出されます
  • beforeResolve()beforeEachが実行され、すべてのコンポーネントが実行されると呼び出されますbeforeRouterEnterそしてbeforeRouteUpdate警備員が呼ばれますが、ナビゲーションが確認される前です。必要に応じて、最終チェック
  • afterEach()ナビゲーションが確認された後に呼び出されます

「ナビゲーション確認済み」とはどういう意味ですか?すぐにわかります。それまでの間、「アプリはそのルートに移動できる」と考えてください。

使用法は次のとおりです。

this.$router.beforeEach((to, from, next) => {
  // ...
})
this.$router.afterEach((to, from) => {
  // ...
})

toそしてfrom行き来するルートオブジェクトを表します。beforeEach追加のパラメータがありますnextこれを呼び出すとfalseパラメータとして、ナビゲーションをブロックし、未確認にします。 Nodeミドルウェアと同様に、慣れている場合は、next()を常に呼び出す必要があります。そうしないと、実行が停止します。

単一ルートコンポーネントにもガードがあります。

  • beforeRouteEnter(from, to, next)現在のルートが確認される前に呼び出されます
  • beforeRouteUpdate(from, to, next)ルートが変更されたときに呼び出されますが、ルートを管理するコンポーネントは同じです(動的ルーティングの場合、次を参照)
  • beforeRouteLeave(from, to, next)ここから離れると呼ばれます

ナビゲーションについて触れました。ルートへのナビゲーションが確認されたかどうかを判断するために、Vueルーターはいくつかのチェックを実行します。

  • それは呼び出すbeforeRouteLeave現在のコンポーネントをガードします
  • ルーターを呼び出しますbeforeEach()ガード
  • それはbeforeRouteUpdate()再利用が必要なコンポーネント(存在する場合)
  • それはbeforeEnter()ルートオブジェクトをガードします(私はそれについて言及しませんでしたが、あなたは見ることができますここに
  • それはbeforeRouterEnter()入力する必要のあるコンポーネントで
  • ルーターを呼び出しますbeforeResolve()ガード
  • すべてが順調だった場合、ナビゲーションが確認されます!
  • ルーターを呼び出しますafterEach()ガード

ルート固有のガードを使用できます(beforeRouteEnterそしてbeforeRouteUpdate動的ルーティングの場合)ライフサイクルフックとして、開始できますデータフェッチリクエスト例えば。

動的ルーティング

上記の例は、URLに基づいて、//loginそして/aboutルート。

非常に一般的なニーズは、すべての投稿を下に置くなど、動的ルートを処理することです。/post/、それぞれにスラッグ名が付いています:

  • /post/first
  • /post/another-post
  • /post/hello-world

これは、動的セグメントを使用して実現できます。

それらは静的セグメントでした:

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/login', component: Login },
    { path: '/about', component: About }
  ]
})

ブログ投稿を処理するために動的セグメントを追加します。

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/post/:post_slug', component: Post },
    { path: '/login', component: Login },
    { path: '/about', component: About }
  ]
})

に注意してください:post_slug構文。これは、任意の文字列を使用できることを意味し、それはにマップされますpost_slugプレースホルダー。

この種の構文に限定されません。 Vueはに依存していますこのライブラリ動的ルートを解析するために、そしてあなたは正規表現

これで、Post routeコンポーネント内で、を使用してルートを参照できます。$route、およびポストスラッグを使用して$route.params.post_slug

const Post = {
  template: '<div>Post: {{ $route.params.post_slug }}</div>'
}

このパラメーターを使用して、バックエンドからコンテンツをロードできます。

同じURLに、必要な数の動的セグメントを含めることができます。

/post/:author/:post_slug

ユーザーが新しいルートに移動するとどうなるかについて話す前に覚えていますか?

動的ルートの場合、何が起こるかは少し異なります。

現在のルートコンポーネントを破棄して再インスタンス化する代わりに、より効率的にするために、現在のインスタンスを再利用します。

これが発生すると、VueはbeforeRouteUpdateライフサイクルイベント。そこで、必要な操作を実行できます。

const Post = {
  template: '<div>Post: {{ $route.params.post_slug }}</div>'
  beforeRouteUpdate(to, from, next) {
    console.log(`Updating slug from ${from} to ${to}`)
    next() //make sure you always call next()
  }
}

小道具の使用

例では、私は使用しました$route.params.*ルートデータにアクセスします。コンポーネントはルーターとそれほど緊密に結合されるべきではなく、代わりに小道具を使用できます。

const Post = {
  props: ['post_slug'],
  template: '<div>Post: {{ post_slug }}</div>'
}

const router = new VueRouter({ routes: [ { path: ‘/post/:post_slug’, component: Post, props: true } ] })

に注意してくださいprops: trueこの機能を有効にするためにルートオブジェクトに渡されます。

ネストされたルート

前に述べたように、同じURLに、次のように、必要な数の動的セグメントを含めることができます。

/post/:author/:post_slug

したがって、最初の動的セグメントを処理するAuthorコンポーネントがあるとします。

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script> import Vue from ‘vue’ import VueRouter from ‘vue-router’

Vue.use(VueRouter)

const Author = { template: ‘<div>Author: {{ $route.params.author}}</div>’ }

const router = new VueRouter({ routes: [ { path: ‘/post/:author’, component: Author } ] })

new Vue({ router }).$mount(’#app’) </script>

秒を挿入できますrouter-viewAuthorテンプレート内のコンポーネントインスタンス:

const Author  = {
  template: '<div>Author: {{ $route.params.author}}<router-view></router-view></div>'
}

Postコンポーネントを追加します。

const Post = {
  template: '<div>Post: {{ $route.params.post_slug }}</div>'
}

次に、VueRouter構成に内部動的ルートを挿入します。

const router = new VueRouter({
  routes: [{
    path: '/post/:author',
    component: Author,
    children: [
      path: ':post_slug',
      component: Post
    ]
  }]
})

私の無料ダウンロードVueハンドブック


その他のvueチュートリアル: