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 を渡します。バー '＃＃＃。

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