So verbergen Sie Adressleistenparameter in Vue.js

Bei der Verwendung von Vue.js zur Entwicklung von Front-End-Projekten ist die Verarbeitung der Parameter der URL-Adressleiste ein sehr grundlegendes, aber wichtiges Thema. In vielen Fällen müssen wir Parameter von der URL abrufen. Wenn wir beispielsweise von der vorherigen Seite zur aktuellen Seite springen, müssen wir diese Informationen an die URL übergeben in Form von Parametern. Manchmal müssen diese Parameter jedoch ausgeblendet werden. Schließlich sollten vertrauliche Informationen in der URL nicht so leicht verloren gehen. In diesem Artikel erfahren Sie, wie Sie die Adressleistenparameter in Vue.js ausblenden.

1. Dynamisches Routing

Zunächst können wir die Parameter in der Adressleiste durch dynamisches Routing von Vue.js ausblenden. Dynamisches Routing ist eine Technik, die Parameter in der URL den tatsächlich angezeigten Komponenten zuordnet. Wir gehen beispielsweise davon aus, dass es eine Artikellistenseite gibt, um diesen Artikel zu identifizieren. Wir können diese ID als Parameter der Route verwenden und diese ID dann in der Komponente lesen die entsprechenden Artikelinformationen.

Konkret können wir zunächst eine dynamische Route in der Routing-Konfiguration definieren und einen bestimmten Abschnitt des Routenpfads (z. B. Artikel-ID) als dynamischen Parameter festlegen:

const router = new VueRouter({ routes: [ { path: '/article/:id', name: 'Article', component: Article } ] })

In diesem Beispiel:id ist ein dynamischer Parameter, der die ID des Artikels darstellt. In der entsprechenden Komponente können wir den Wert dieses Parameters über $route.params.idabrufen::id就是一个动态参数，表示文章的 ID。在对应的组件中，我们可以通过$route.params.id来获取这个参数的值：

export default { mounted () { console.log(this.$route.params.id) } }

const router = new VueRouter({ routes: [ { path: '/search', name: 'Search', component: Search } ] }) // 当用户在输入框中输入搜索关键词时 this.$router.push({ name: 'Search', query: { keyword: '关键词' } }) export default { mounted () { console.log(this.$route.query.keyword) } }