So implementieren Sie Umleitungs-Vue

Während des Vue-Anwendungsentwicklungsprozesses ist die Umleitung eine häufige Anforderung. Nachdem sich ein Benutzer beispielsweise erfolgreich angemeldet hat, muss er oder sie zur Startseite weitergeleitet werden. In diesem Artikel erfahren Sie, wie Sie eine Umleitung in Vue implementieren.

1. Verwenden Sie den Navigationsschutz von Vue Router

Vue Router ist der offizielle Routing-Manager von Vue.js. In Vue Router gibt es einen Navigationsschutzmechanismus. Seine Hauptfunktion besteht darin, den Schutz zu betreten, bevor sich die Route ändert, und in den Schutz einzutreten, nachdem sich die Route geändert hat.

Bei der Implementierung der Umleitungsfunktion können wir die Navigationsschutzfunktion von Vue Router verwenden, um den Schutz einzugeben, bevor sich die Route ändert, und dann den Umleitungsvorgang über das Routingobjekt durchführen.

Konkret können wir den Navigationsschutz in der Routing-Konfigurationsdatei festlegen, wie unten gezeigt:

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login.vue'),
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/home.vue'),
    meta: {
      needLogin: true, // 需要登录
    },
  },
];

const router = new Router({
  routes,
});

// 导航守卫
router.beforeEach((to, from, next) => {
  const isLogin = localStorage.getItem('token'); // 判断是否登录
  if (to.meta.needLogin) { // 判断是否需要登录
    if (isLogin) {
      next();
    } else {
      next({
        name: 'login', // 跳转到登录页面
      });
    }
  } else {
    next();
  }
});

export default router;

Im obigen Code definieren wir zunächst zwei Routen, nämlich die Anmeldeseite und die Startseite. In der Routing-Konfiguration der Startseite haben wir ein Metaattribut hinzugefügt, um zu kennzeichnen, dass für den Zugriff auf die Seite eine Anmeldung erforderlich ist. Anschließend ermitteln wir im Navigationsschutz, ob der Benutzer angemeldet ist und ob die aktuelle Seite eine Anmeldung erfordert. Wenn der Benutzer bereits angemeldet ist und die aktuelle Seite eine Anmeldung erfordert, können Sie weiterhin auf die Seite zugreifen, andernfalls wird der Benutzer angemeldet sein zur Anmeldeseite weitergeleitet.

2. Verwenden Sie die programmgesteuerte Navigation von Vue Router.

Zusätzlich zur Verwendung von Navigationswächtern zum Implementieren der Umleitung können wir auch die programmgesteuerte Navigation von Vue Router verwenden, um die Umleitungsfunktion zu implementieren.

Vue Router bietet zwei Methoden zum Implementieren der programmatischen Navigation:

• this.$router.push(location, onComplete?, onAbort?): Wird zum Wechseln von Routen und zum Speichern des Browserverlaufs verwendet.
• this.$router.replace(location, onComplete?, onAbort?): Wird zum Wechseln von Routen und zum Ersetzen des Browserverlaufs verwendet.

Wir können die Umleitung implementieren, indem wir die Push- oder Replacement-Methode in der Komponente aufrufen, die umgeleitet werden muss.

Nachdem sich der Benutzer erfolgreich angemeldet hat, können wir ihn zur Startseite weiterleiten. Der Code lautet wie folgt:

// 用户登录成功后，进行重定向操作
this.$router.push('/home');

3. Verwenden Sie Meta in Kombination mit der programmatischen Navigation.

Wenn wir beim Umleiten einige Parameter übergeben müssen, oder muss dynamisch berechnet werden Die umgeleitete Zieladresse muss mithilfe von Meta in Kombination mit programmatischer Navigation implementiert werden.

Konkret können wir das Meta-Attribut in der Routing-Konfiguration festlegen, um einige Parameter oder die berechnete Zieladresse zu speichern, und dann durch programmgesteuerte Navigation in der Komponente umleiten.

Hier ist ein Beispielcode:

// 路由配置文件
const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login.vue'),
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/home.vue'),
    meta: {
      needLogin: true,
    },
  },
  {
    path: '/profile',
    name: 'profile',
    component: () => import('@/views/profile.vue'),
    meta: {
      needLogin: true,
    },
  },
  {
    path: '/redirect',
    name: 'redirect',
    component: () => import('@/views/redirect.vue'),
  },
];

// 跳转到profile页面，需要登录且传递了参数
this.$router.push({
  name: 'redirect',
  query: {
    redirectTo: 'profile',
    params: {
      username: '张三',
      age: 18,
    },
  },
});

Im obigen Code definieren wir eine Umleitungsroute, um die umgeleitete Zieladresse zu empfangen. Im Front-End-Code übergeben wir die Seite, die umgeleitet werden muss, als Abfrageparameter an die Umleitungsroute, indem wir die Methode $router.push aufrufen. Anschließend rufen wir in der Umleitungskomponente den Abfrageparameter ab und führen den Umleitungsvorgang aus.

4. Globale Wächter mit Navigation Guards

Vue Router bietet einen globalen Wächtermechanismus, über den globale Wächter einige Vorgänge vor und nach Routing-Änderungen durchführen können, wie z. B. die Aufzeichnung von Benutzerzugriffsprotokollen, globales Abfangen usw.

Im globalen Wächter können wir die nächste Methode verwenden, um Umleitungsvorgänge durchzuführen. Beispielsweise springt der folgende Code automatisch zur mobilen Seite, wenn die Fenstergröße einen bestimmten Wert unterschreitet:

// 全局守卫
router.beforeEach((to, from ,next) => {
  const userAgentInfo = navigator.userAgent;
  const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
  let flag = true;
  for (let i = 0; i < Agents.length; i++) {
    if (userAgentInfo.indexOf(Agents[i]) > 0) {
      flag = false;
      break;
    }
  }
  if (flag && window.innerWidth < 768) {
    next('/mobile');
  } else {
    next();
  }
})

Im obigen Code ermitteln wir die Fenstergröße und den Gerätetyp im globalen Guard. Wenn die Bedingungen erfüllt sind, Dann verwenden Sie die nächste Methode für den Umleitungsvorgang.

Zusammenfassung

In diesem Artikel werden verschiedene Möglichkeiten zur Implementierung der Umleitung in Vue-Anwendungen vorgestellt, einschließlich der Verwendung der Navigationswächter, der programmatischen Navigation und der globalen Wächter von Vue Router sowie Methoden zur Übergabe von Parametern in Kombination mit Meta. In der tatsächlichen Entwicklung können wir entsprechend unseren Anforderungen die am besten geeignete Methode zur Implementierung der Umleitungsfunktion auswählen.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Umleitungs-Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!