Bei der Verwendung der Vue-Entwicklung traten Probleme bei der Übergabe von Routenparametern und der Routenüberwachung auf

Vue ist ein JavaScript-basiertes Front-End-Entwicklungsframework, das Entwicklern hilft, effiziente, flexible und skalierbare Benutzeroberflächen zu erstellen. Während des Vue-Entwicklungsprozesses sind Routing-Parameter und Routing-Guards einige häufige Probleme. In diesem Artikel werden diese Probleme beschrieben und spezifische Codebeispiele bereitgestellt.

1. Problem bei der Übergabe von Routing-Parametern
In Vue bedeutet die Übergabe von Routing-Parametern, dass einige Daten an die Zielseite übergeben werden, während die Seite springt. Zu den häufigsten Szenarios gehört, dass der Benutzer auf ein Element auf der Listenseite klickt, dann zur Detailseite springt und die Informationen zum entsprechenden Element an die Detailseite übergibt. Bei der Implementierung von Routing-Parametern können Sie die Parameter oder Abfragen von Vue Router verwenden, um Parameter zu übergeben.

1. Verwenden Sie params, um Parameter zu übergeben.
   params ist eine Möglichkeit, Parameter in Form eines dynamischen Pfads an die Zielseite zu übergeben. Es eignet sich für Situationen, in denen Parameter in die URL aufgenommen werden müssen. Das Folgende ist ein Beispielcode:

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/detail/:id',
      component: Detail
    }
  ]
})

// 列表页
<template>
  <div>
    <ul>
      <li v-for="item in itemList" :key="item.id">
        <router-link :to="'/detail/' + item.id">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      itemList: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' },
        { id: 3, name: '项目3' },
      ]
    }
  }
}
</script>

// 详情页
<template>
  <div>
    <h2 id="project-name">{{ project.name }}</h2>
    <p>{{ project.description }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      project: {}
    }
  },
  mounted() {
    // 获取params参数
    const id = this.$route.params.id;
    // 根据id去获取具体项目信息，这里为了简化，直接从itemList中查找
    this.project = this.itemList.find(item => item.id === Number(id));
  }
}
</script>

2. Abfrage zum Übergeben von Parametern verwenden
   Abfrage ist eine Möglichkeit, Parameter in Form von Schlüssel-Wert-Paaren an die URL anzuhängen. Sie eignet sich für Situationen, in denen viele oder komplexere Parameter vorhanden sind . Das Folgende ist ein Beispielcode:

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/detail',
      component: Detail
    }
  ]
})

// 列表页
<template>
  <div>
    <ul>
      <li v-for="item in itemList" :key="item.id">
        <router-link :to="{ path: '/detail', query: { id: item.id }}">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      itemList: [
        { id: 1, name: '项目1' },
        { id: 2, name: '项目2' },
        { id: 3, name: '项目3' },
      ]
    }
  }
}
</script>

// 详情页
<template>
  <div>
    <h2 id="project-name">{{ project.name }}</h2>
    <p>{{ project.description }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      project: {}
    }
  },
  mounted() {
    // 获取query参数
    const id = this.$route.query.id;
    // 根据id去获取具体项目信息，这里为了简化，直接从itemList中查找
    this.project = this.itemList.find(item => item.id === Number(id));
  }
}
</script>

2. Route-Guard-Problem
Route-Guard bezieht sich auf die Funktion, einige Vorgänge vor und nach einem Routensprung auszuführen. In Vue Router können unterschiedliche Anforderungen durch globale Frontwächter, globale Postwächter und Wächter innerhalb von Komponenten erfüllt werden.

1. Global Front Guard
   Global Front Guard kann vor jedem Routensprung einige Vorgänge ausführen, z. B. die Überprüfung von Benutzerberechtigungen oder die Aufzeichnung des Benutzerverhaltens. Hier ist ein Beispielcode:

// 路由守卫配置
router.beforeEach((to, from, next) => {
  // 判断用户是否处于登录状态
  const isLogged = checkLogin();
  
  if (to.meta.authRequired && !isLogged) {
    // 需要登录才能访问的页面
    next('/login');
  } else {
    next();
  }
});

2. Global Post Guard
   Global Post Guard kann nach jedem Routensprung einige Vorgänge ausführen, z. B. das Aufzeichnen des Benutzerverhaltens oder das Zählen von Seitenaufrufen. Hier ist ein Beispielcode:

// 路由守卫配置
router.afterEach((to, from) => {
  // 统计页面浏览量
  recordPageView();
});

3. Guards innerhalb einer Komponente
   Guards innerhalb einer Komponente können bestimmte Vorgänge für die aktuelle Komponente ausführen, z. B. das Speichern vom Benutzer eingegebener Daten oder die Überprüfung, ob das Formular ausgefüllt ist, bevor die Komponente zerstört wird. Das Folgende ist ein Beispielcode:

// 组件内的守卫配置
export default {
  beforeRouteLeave(to, from, next) {
    if (this.isDirty) {
      // 提示用户保存未保存的数据
      const confirmed = window.confirm('是否保存未提交的数据？');

      if (confirmed) {
        // 保存数据
        this.saveData();
      }
    }

    next();
  }
}

Das Obige ist die Lösung für die Probleme mit der Übergabe von Routing-Parametern und dem Routing-Schutz, die bei der Vue-Entwicklung auftreten. Durch die Verwendung von Parametern oder Abfragen zur Übergabe von Parametern und die Kombination globaler Pre-Guards, globaler Post-Guards und Guards innerhalb von Komponenten können flexiblere und sicherere Routensprünge und -operationen erreicht werden. Ich hoffe, dieser Artikel kann für Sie hilfreich sein.

Das obige ist der detaillierte Inhalt vonBei der Verwendung der Vue-Entwicklung traten Probleme bei der Übergabe von Routenparametern und der Routenüberwachung auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!