vue greift nicht über Routing auf die Schnittstelle zu

Mit der kontinuierlichen Weiterentwicklung der Front-End-Entwicklungstechnologie ist Vue zu einem unverzichtbaren Framework in der Webentwicklung geworden. Es ist eine übliche Verwendung von Vue, durch Routing zwischen Seiten zu wechseln, aber manchmal müssen wir auch auf andere Weise auf Seiten zugreifen. In diesem Artikel wird erläutert, wie Sie in Vue ohne Routing auf die Schnittstelle zugreifen können.

1. Vorkenntnisse

Bevor wir den Zugriff auf die Vue-Schnittstelle vorstellen, müssen wir einige Vorkenntnisse verstehen:

1. Die Vue-Komponente ist eine der leistungsstärksten Funktionen von Vue.js . Komponenten können Code entkoppeln und die Wiederverwendung und Wartung erleichtern.

2. Vue-Routing

Vue-Routing ist ein offiziell von Vue.js bereitgestelltes Plug-In, das zum Implementieren des Routing-Switchings zwischen Seiten verwendet wird.

3. Vue-Instanz

Eine Vue-Instanz ist eine Objektinstanz von Vue.js und repräsentiert eine Vue-Anwendung. Vue-Instanzen können zur Steuerung eines DOM-Elements oder zur Verwendung mit Vue-Komponenten verwendet werden.

4. Route Guard

Route Guard ist eine wichtige Funktion des Vue-Routings, die zur Steuerung von Seitenzugriffsberechtigungen, zur Implementierung der Seitenvorverarbeitung und anderen Funktionen verwendet wird.

2. Option 1: Verwenden Sie Vue-Instanzen, um auf Komponenten zuzugreifen. In der tatsächlichen Entwicklung speichern wir diese Instanz normalerweise in einer globalen Variablen und rufen sie direkt auf, wenn Zugriff erforderlich ist.

1. Erstellen Sie eine Vue-Instanz

Beim Erstellen einer Vue-Instanz können wir die Instanz für den späteren direkten Zugriff in einer globalen Variablen speichern.

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

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

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

2. Auf Komponenten zugreifen

Über die globale Variable window.vm können wir auf das Vue-Instanzobjekt und dann über vm.$refs auf die Komponente zugreifen.

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

Wobei componentName der Name der Komponente ist und methodName() der Name der Methode in der Komponente ist. Auf diese Weise können wir auf die Komponente zugreifen, ohne das Routing durchlaufen zu müssen.

3. Option 2: Verwenden Sie Routing Guards, um die Seitenzugriffsrechte zu steuern. In einigen Fällen müssen wir möglicherweise die Seitenzugriffsrechte steuern. Zu diesem Zeitpunkt können wir die Verwendung von Routing Guards in Betracht ziehen, um dies zu erreichen. window.vm ，我们可以访问 Vue 实例对象，然后通过 vm.$refs 访问组件。

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()
  }
})

其中，componentName 是组件的名称，methodName() 是组件中的方法名称。通过这种方式，我们就可以在不通过路由的情况下访问组件。

三、方案二：使用路由守卫控制页面访问权限

在某些情况下，我们可能需要对页面进行访问权限的控制，这时候就可以考虑使用路由守卫来实现。

1、添加路由守卫

我们可以在路由配置中添加路由守卫，通过判断一些条件来控制页面是否可以访问。

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

以上代码中，我们给路由配置中的 pageA 添加了一个 requireAuth 字段，并在路由守卫中通过判断这个字段的值来控制页面访问权限。

2、跳转页面

在需要访问指定页面时，我们可以通过 $router.push() 方法来跳转页面。

rrreee

以上代码中，我们使用 $router.push() 方法跳转到了 pageA 页面，并传递了一个参数 foo: 'bar'

1. Routing-Guards hinzufügen

Wir können Routing-Guards in der Routing-Konfiguration hinzufügen, um zu steuern, ob auf die Seite zugegriffen werden kann, indem wir einige Bedingungen beurteilen.

rrreee

Im obigen Code haben wir in der Routing-Konfiguration ein requireAuth-Feld zu pageA hinzugefügt und die Seitenzugriffsberechtigungen gesteuert, indem wir den Wert dieses Felds im Routing-Guard beurteilt haben . 🎜🎜2. Zur Seite springen🎜🎜Wenn wir auf die angegebene Seite zugreifen müssen, können wir über die Methode $router.push() zur Seite springen. 🎜rrreee🎜Im obigen Code verwenden wir die Methode $router.push(), um zur Seite pageA zu springen, und übergeben einen Parameter foo: 'bar ' . 🎜🎜4. Zusammenfassung🎜🎜In diesem Artikel werden zwei Möglichkeiten zur Implementierung des Schnittstellenzugriffs in Vue ohne Routing vorgestellt: die Verwendung von Vue-Instanzen für den Zugriff auf Komponenten und die Verwendung von Route Guards zur Steuerung der Seitenzugriffsberechtigungen. In der tatsächlichen Entwicklung können wir die geeignete Methode entsprechend den spezifischen Anforderungen auswählen. Unabhängig davon, welche Methode verwendet wird, sollten wir mit den Grundkenntnissen von Vue vertraut sein und einer angemessenen Codestruktur folgen, um die Wartung und Aktualisierung des Codes zu erleichtern. 🎜

Das obige ist der detaillierte Inhalt vonvue greift nicht über Routing auf die Schnittstelle zu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!