So stellen Sie sicher, dass die sekundären Unterrouten standardmäßig in Vue angezeigt werden

Vue.js ist derzeit eines der beliebtesten Front-End-Frameworks. Es verfügt über umfangreiche Komponenten und Routing-Mechanismen, die es uns ermöglichen, schnell komplexe Single-Page-Anwendungen zu entwickeln. Unter anderem ist der Routing-Mechanismus ein wichtiger Bestandteil von Vue.js. Er wird über die URL-Adresse der entsprechenden Komponente zugeordnet und unterstützt verschachteltes Routing. In diesem Artikel erfahren Sie, wie Sie sekundäre Unterrouten standardmäßig in Vue.js anzeigen lassen.

1. Verwenden Sie den Vue-Router, um das Routing zu konfigurieren.

In Vue.js ist es sehr einfach, den Vue-Router zum Konfigurieren des Routings zu verwenden. Wir erstellen zunächst ein grundlegendes Vue.js-Projekt und installieren vue-router:

npm install vue-router --save

In der main.js-Datei importieren wir vue-router und registrieren:

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

Vue.config.productionTip = false

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

In der router.js-Datei können wir Routing konfigurieren:

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
import User from './views/User.vue'
import Profile from './views/Profile.vue'
import Setting from './views/Setting.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/user',
      name: 'user',
      component: User,
      children: [
        {
          path: '',
          name: 'profile',
          component: Profile
        },
        {
          path: 'setting',
          name: 'setting',
          component: Setting
        }
      ]
    }
  ]
})

In der obigen Routing-Konfiguration haben wir zwei Unterrouten unter dem /user-Pfad konfiguriert: /user und /user/setting, die den Profil- bzw. Einstellungskomponenten entsprechen.

2. Stellen Sie die sekundäre Unterroute so ein, dass sie standardmäßig angezeigt wird

Wir haben festgestellt, dass beim Zugriff auf den /user-Pfad nur die Profilkomponente angezeigt wird und die /user/setting-Komponente nicht standardmäßig angezeigt wird. Wenn wir möchten, dass die Komponente /user/setting standardmäßig angezeigt wird, wie sollten wir sie einrichten?

Wir können Vue.js im Routenwächter der Route verwenden, um Routenänderungen zu überwachen und festzustellen, ob der Pfad legal ist, um die URL umzuleiten.

In der Datei router.js können wir einen Route Guard hinzufügen:

export default new Router({
  // ...其他配置
  routes: [
    // ...其他路由配置
  ]
})

router.beforeEach((to, from, next) => {
  // 判断是否进入 /user 路径
  if (to.path === '/user') {
    // 将路径重定向为 /user/setting
    next({path: '/user/setting'})
  } else {
    // 不需要进入 /user 路径
    next()
  }
})

Im obigen Code verwenden wir die Methode router.beforeEach(), um einen globalen Route Guard zu registrieren, der abfängt, wenn sich die Route ändert. Zuerst ermitteln wir, ob der aktuelle Routing-Pfad /user ist. Wenn ja, leiten Sie die URL nach /user/setting um, andernfalls fahren Sie direkt mit dem nächsten Routing-Schritt fort.

Auf diese Weise haben wir den Effekt erreicht, dass die sekundären Unterrouten standardmäßig angezeigt werden.

Zusammenfassung

Legen Sie die sekundäre Unterroute fest, die standardmäßig in Vue.js angezeigt werden soll. Sie können Routenänderungen überwachen und den Pfad im Routenschutz umleiten. Auf diese Weise können beim Zugriff des Benutzers auf eine bestimmte Route automatisch die entsprechenden Komponenten angezeigt werden, um das Benutzererlebnis zu verbessern.

Das obige ist der detaillierte Inhalt vonSo stellen Sie sicher, dass die sekundären Unterrouten standardmäßig in Vue angezeigt werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!