vue はルーティングを通じてインターフェイスにアクセスしません

フロントエンド開発テクノロジーの継続的な進歩により、Vue は Web 開発に不可欠なフレームワークの 1 つになりました。ルーティングを通じてページ間を切り替えるのは Vue の一般的な使用法ですが、場合によっては、他の方法でページにアクセスする必要があることもあります。この記事では、Vueでルーティングを行わずにインターフェースにアクセスする方法を紹介します。

1. 前提知識

Vue インターフェイスにアクセスする方法を紹介する前に、いくつかの前提知識を理解する必要があります:

1. Vue コンポーネント

Vueコンポーネントは、Vue.js の最も強力な機能の 1 つです。コンポーネントを使用するとコードを分離でき、再利用と保守が容易になります。

2. Vue routing

Vue routing は Vue.js が公式に提供しているプラ​​グインで、ページ間のルーティング切り替えを実装するために使用されます。

3. Vue インスタンス

Vue インスタンスは、Vue アプリケーションを表す Vue.js のオブジェクト インスタンスです。 Vue インスタンスは、DOM 要素を制御したり、Vue コンポーネントで使用したりするために使用できます。

4. ルート ガード

ルート ガードは Vue ルーティングの重要な機能であり、ページのアクセス許可の制御、ページの前処理やその他の機能の実装に使用されます。

2. オプション 1: Vue インスタンスを使用してコンポーネントにアクセスする

Vue インスタンスを通じてコン​​ポーネントにアクセスできます。実際の開発では、通常、このインスタンスをグローバル変数に保存し、アクセス時に直接呼び出します。必要です。

1. Vue インスタンスの作成

Vue インスタンスを作成するとき、後続の直接アクセスのためにインスタンスをグローバル変数に保存できます。

import Vue from 'vue'
import App from './App.vue'

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

// 把 Vue 实例存储在全局变量中
window.vm = vm

2. コンポーネントへのアクセス

グローバル変数window.vmを通じて、Vueインスタンス オブジェクトにアクセスし、vm.$refsを通じてアクセスできます。 コンポーネント。

window.vm.$refs.componentName.methodName()

このうち、componentName はコンポーネントの名前、methodName() はコンポーネント内のメソッドの名前です。こうすることで、ルーティングを経由せずにコンポーネントにアクセスできます。

3. オプション 2: ルーティング ガードを使用してページのアクセス権を制御する

場合によっては、ページのアクセス権を制御する必要がある場合があります。現時点では、ルーティング ガードの使用を検討できます。 。

1. ルーティング ガードの追加

ルーティング設定にルーティング ガードを追加して、条件を判断してページにアクセスできるかどうかを制御できます。

const router = new VueRouter({
  routes: [
    {
      path: '/pageA',
      name: 'pageA',
      component: PageA,
      meta: {
        requireAuth: true  // 添加一个自定义字段 requireAuth
      }
    },
    {
      path: '/pageB',
      name: 'pageB',
      component: PageB,
      meta: {
        requireAuth: false
      }
    }
  ]
})

// 添加路由守卫
router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    // 判断用户是否登录
    if (isLogin()) {
      next()
    } else {
      // 跳转到登录页
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    }
  } else {
    next()
  }
})

上記のコードでは、ルーティング設定の pageA に requireAuth フィールドを追加し、ルーティング内のこのフィールドの値を判断してページを制御しています。ガードのアクセス許可。

2. ページにジャンプ

指定されたページにアクセスする必要がある場合、$router.push() メソッドを通じてそのページにジャンプできます。

this.$router.push({
  path: '/pageA',
  query: {
    foo: 'bar'
  }
})

上記のコードでは、$router.push() メソッドを使用して pageA ページにジャンプし、パラメータ foo を渡します。バー '＃＃＃。

4. 概要

この記事では、ルーティングを使用せずに Vue でインターフェイス アクセスを実装する 2 つの方法、つまり Vue インスタンスを使用してコンポーネントにアクセスする方法と、ルート ガードを使用してページのアクセス許可を制御する方法を紹介します。実際の開発では、特定のニーズに応じて適切な方法を選択できます。どの方法を使用する場合でも、コードのメンテナンスとアップグレードを容易にするために、Vue の基本的な知識を理解し、合理的なコード構造に従う必要があります。

以上がvue はルーティングを通じてインターフェイスにアクセスしませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。