Vueのvue-routerの素晴らしい使い方を詳しく解説

Vue は現在最も人気のあるフロントエンド フレームワークの 1 つで、シンプルで使いやすいだけでなく、拡張性も高く、注目すべきプラグインの 1 つが vue-router です。 vue-router は Vue の公式ルーティング プラグインで、Vue アプリケーションでのルーティング ナビゲーションをより適切に制御し、ルーティングとコンポーネントの関係を明確にし、ユーザーのインタラクティブ エクスペリエンスを向上させることができます。この記事では、Vue-routerの使い方とその素晴らしい使い方を詳しく解説します。

1. インストールと使用方法

vue-router を使用する前に、まずインストールする必要があります。 npm パッケージ マネージャーを使用して、vue-router プラグインをインストールできます。インストールコマンドは以下のとおりです。

npm install vue-router

インストールが完了したら、main.js ファイルに vue-router を導入して使用します。

import VueRouter from 'vue-router'
import routes from './router'

const router = new VueRouter({
      routes
})

new Vue({
      el: '#app',
      router,
      render: h => h(App)
})

このうち、routes パラメータはルーティング設定を指定します。 、プロジェクトのニーズに応じて変更できます。次に、Vue インスタンス化オブジェクトのルーター パラメーターを渡して、ルーティング機能を有効にします。

2. 基本構成

ルーティング構成は、ルーティング テーブルとルーティング コンポーネントの 2 つの部分で構成されます。ルーティング テーブルは主にルーティング パスと対応するコンポーネントを構成するために使用され、ルーティング コンポーネントは対応するルーティング パスのコンポーネント ビューです。

src ディレクトリに router.js ファイルを作成して、ルーティング テーブルとコンポーネントを定義します。次のように:

import Home from './views/Home.vue'
import About from './views/About.vue'

export default [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/about',
        name: 'about',
        component: About
    }
]

次に、main.js にルーティング設定を導入し、それを VueRouter インスタンスに渡します。このうち、ルーティングパスは path 属性を使用して設定され、component 属性は対応するルーティングコンポーネントを指定します。

3. パラメータの受け渡し

Vue-router はパラメータの受け渡しもサポートしており、渡されたパラメータは $route オブジェクトを通じて取得できます。

1. パラメータを渡すパス

パラメータを渡すパスとは、ルーティング パスの一部としてパラメータを配置することを指します。例:

{
  path: '/user/:userId',
  name: 'user',
  component: User
}

ユーザーが / にアクセスしたときuser/ 1 の場合、ルートはパラメータ userId として 1 を User コンポーネントに渡します。

2. クエリ パラメータの受け渡し

クエリ パラメータの受け渡しとは、ルーティング パスの後に、疑問符?で区切られたキーと値のペアの形式でパラメータを配置することを意味します。連続したキーは値です。ペアは & で接続されます。例:

{
  path: '/user',
  name: 'user',
  component: User
}

ユーザーが /user?id=1&name=john にアクセスすると、ルートはクエリ パラメーターとして {id: 1, name: 'john'} をユーザーに渡します。成分。

4. リダイレクトとネストされたルーティング

1. リダイレクト

リダイレクトとは、ユーザーがブラウザー内の特定のパスにアクセスすると、自動的に別のパスにジャンプすることを指します。 。次のコードは、パス /about からパス /home に自動的にジャンプする機能を実装します。

import Home from './views/Home.vue'
import About from './views/About.vue'

export default [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    redirect: '/home'
  }
]

2. ネストされたルーティング

ネストされたルーティングは、親コンポーネント コンポーネントのルーティング。たとえば、ページの先頭と末尾に固定構造がある場合、「コンテンツ」コンポーネントをネストする必要があります。3 層構造は次のようになります。親コンポーネント内のルーター -view> タグを使用して、親コンポーネントのルーティング テーブル内の場所を占め、子ルーティング テーブルを定義します。例:

header
 / 
L   R
    |
content
    |
footer

975b587bf85a482ea10b0a28848e78a4 タグは、サブコンポーネント「about」および「content」のプレースホルダーとしてホーム コンポーネントで使用されます。ルーティング テーブルにおいて、親コンポーネント「home」によって構成されるサブルーティング テーブルには、「about」と「content」の 2 つのサブルーティング パスが含まれています。

5. ルーティング ガード

グローバル ガード

1. グローバル ガードはルーティングの切り替え前にトリガーされ、そのうちの beforeEach() はグローバル プレガードです。 、権限の検証やログインの検証などの操作を実行できます。

const home = {
  template: `
    <div>
      <h2>Home</h2>
      <router-view></router-view>
    </div>
  `
}

const about = {
  template: '<div>About</div>'
}

const contact = {
  template: '<div>Contact</div>'
}

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home,
      children: [
        {
          path: 'about',
          name: 'about',
          component: about
        },
        {
          path: 'contact',
          name: 'contact',
          component: contact
        }
      ]
    }
  ]
})

グローバル ポスト ガードは、ルーティング切り替え後のトリガーに使用され、ページ読み込みのプログレス バーなどの操作を処理するために使用されます。

ルート排他ガード

2. ルート排他ガードは、特定のルートに対して特定の処理を行うために使用され、ルート設定に beforeEnter 属性の定義を追加するだけです。

router.beforeEach((to, from, next) => {
  // 验证用户是否登陆 
  if(to.path === '/login') {
    next();
  } else {
    let token = localStorage.getItem('token');

    if(token === null || token === '') {
      next('/login');
    } else {
      next();
    }
  }
})

コンポーネント内ガード

3. コンポーネント内ガードは、主に現在のコンポーネントを処理するために使用されます。含まれるもの: 3 つのガード関数: beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave。

beforeRouteEnter 関数は、コンポーネントが入る前にトリガーされます。この関数でコンポーネント インスタンスに直接アクセスすることはできませんが、コンポーネント インスタンスは次のコールバック関数を通じて処理のために渡すことができます。

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      name: 'admin',
      component: admin,
      beforeEnter: (to, from, next) => {
        // 验证是否为管理员账户
        let token = localStorage.getItem('token');
        if(token === 'admin') {
          next();
        } else {
          next('/');
        }
      }
    }
  ]
})

beforeRouteUpdate 関数 コンポーネント間のルーティング ジャンプではインスタンスが再作成されないため、処理には beforeRouteUpdate 関数を使用する必要があります。

export default {
  data () {
    return {
      user: {}
    }
  },
  beforeRouteEnter (to, from, next) {
    axios.get(`/api/user/${to.params.id}`).then(response => {
      next(vm => vm.setUser(response.data.user))
    })
  },
  methods: {
    setUser (user) {
      this.user = user
    }
  }
}

beforeRouteLeave 関数は、コンポーネントが終了しようとしているときにトリガーされ、未保存のフォーム データなどの操作を処理するために使用されます。

export default {
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  },
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

6. 概要

vue-router プラグインを使用すると、Vue アプリケーションのルーティング ナビゲーションに強力な制御機能が提供され、ユーザーの対話エクスペリエンスが向上します。この記事では、vue-router の基本構成、パラメーターの受け渡し、リダイレクト、ネストされたルーティング、およびルーティング ガードについて紹介します。これは、開発者が vue-router プラグインをより効果的に使用するのに役立ちます。

以上がVueのvue-routerの素晴らしい使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。