So schreiben Sie Parameter ts im Vue3-Routing

Vue3 ist eines der derzeit beliebtesten Front-End-Frameworks mit hervorragender Komponentisierung und Reaktionsfähigkeit. vue-router ist das offiziell von Vue bereitgestellte Routing-Plug-In, das es uns ermöglicht, zwischen Seiten in der Front-End-Anwendung zu springen und eine Single-Page-Anwendung (SPA) zu implementieren.

In der Entwicklung müssen wir manchmal Parameter zwischen Routen übergeben, z. B. um von einer Seite zur anderen zu springen und die entsprechenden Daten anzuzeigen. Als Nächstes stellen wir vor, wie Parameter über den Vue-Router in Vue3 in Kombination mit der TypeScript-Typprüfung übergeben werden, um Laufzeitausnahmen zu vermeiden, die durch falsche Parameterübergabe verursacht werden.

Vue-Router installieren

Bevor wir Vue-Router zum Implementieren des Routensprungs verwenden, müssen wir zuerst Vue-Router installieren:

npm install vue-router@next

Routen definieren

Als nächstes müssen wir Routen in der Vue-Anwendung definieren. In Vue3 werden Routen anders definiert als in Vue2. Das Folgende ist ein einfacher Beispielcode:

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    props: true
  },
  {
    path: '/page/:id',
    name: 'Page',
    component: Page,
    props: true
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

Unter diesen sind createRouter und createWebHistory Factory-Methoden, die von Vue3 zum Erstellen von Routing-Instanzen und Verlaufsmanagern bereitgestellt werden. createRouter和createWebHistory是由Vue3提供的工厂方法，用于创建路由实例和历史记录管理器。

在定义路由时，我们需要指定路径、路由名称和组件。此外，我们还可以通过设置props: true，将路径参数作为组件属性传递，方便组件接收参数。

路由跳转

下面是一个基本的路由跳转示例代码：

import router from '@/router';

router.push({ name: 'Page', params: { id: '1' } });

在上述代码中，我们使用router.push方法进行路由跳转。其中，name为跳转的路由名称，params为传递的参数对象，其内部键与路由路径中的参数名相对应。

接收参数

最后，我们需要在被跳转的页面组件中接收参数，并进行类型检查。

这里有两种方法可以传递参数。一种是通过props，另一种是通过$route。我们分别来看一下这两种传参方法的具体实现：

通过 props 传参

在路由定义时，我们可以通过props选项将路由参数作为组件的属性传递。下面是一个示例代码：

// 路由定义
{
  path: '/page/:id',
  name: 'Page',
  component: Page,
  props: true
}

在组件中，我们可以直接声明这些属性，并通过TypeScript来进行类型检查。下面是一个示例代码：

<script lang="ts">
interface Props {
  id: string;
}

export default {
  props: {
    id: {
      type: String,
      required: true
    }
  },
  setup(props: Props) {
    /* ... */
  }
};
</script>

这里我们使用了Vue3新引入的setup函数，用于替代Vue2中的data、computed、methods等钩子函数。通过props对象，我们可以获取到传递过来的参数，并进行类型检查。

通过 $route 传参

另一种传递参数的方式是通过$route。这种方式下，我们可以通过$route.params对象获取到路由参数。下面是一个示例代码：

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const id = $route.params.id;
    /* ... */
  }
});
</script>

需要注意的是，在使用$route时，我们需要通过静态类型导入RouteLocationNormalized和RouteParams等路由相关类型，并对参数进行类型检查。

import { defineComponent } from 'vue';
import { RouteLocationNormalized, RouteParams } from 'vue-router';

export default defineComponent({
  setup() {
    const route = $route as RouteLocationNormalized & { params: RouteParams };
    const id = route.params.id;
    /* ... */
  }
});

总结

在Vue3下使用vue-router传递路由参数并进行类型检查，是一种更加安全可靠的方式。通过TypeScript的类型检查，我们可以避免因错误传参导致的运行时异常，提高代码的稳定性。同时，Vue3引入的setup

Beim Definieren einer Route müssen wir den Pfad, den Routennamen und die Komponenten angeben. Darüber hinaus können wir die Pfadparameter auch als Komponenteneigenschaften übergeben, indem wir props: true festlegen, um der Komponente den Empfang von Parametern zu erleichtern. 🎜🎜Routensprung🎜🎜Das Folgende ist ein einfacher Beispielcode für einen Routensprung: 🎜rrreee🎜Im obigen Code verwenden wir die Methode router.push, um einen Routensprung durchzuführen. Unter diesen ist name der Sprungroutenname, params ist das übergebene Parameterobjekt und sein interner Schlüssel entspricht dem Parameternamen im Routingpfad. 🎜🎜Parameter empfangen🎜🎜Abschließend müssen wir Parameter in der übersprungenen Seitenkomponente empfangen und eine Typprüfung durchführen. 🎜🎜Es gibt zwei Möglichkeiten, Parameter zu übergeben. Eine davon erfolgt über props und die andere über $route. Werfen wir einen Blick auf die spezifische Implementierung dieser beiden Methoden zur Parameterübergabe: 🎜

Übergabe von Parametern durch Requisiten

🎜Bei der Definition von Routen können wir die Option props verwenden, um Routing-Parameter zu verwenden Als Komponenten werden Eigenschaften übergeben. Hier ist ein Beispielcode: 🎜rrreee🎜In der Komponente können wir diese Eigenschaften direkt deklarieren und eine Typprüfung über TypeScript durchführen. Das Folgende ist ein Beispielcode: 🎜rrreee🎜Hier verwenden wir die neu eingeführte setup-Funktion in Vue3, um die data und computed in Vue2 zu ersetzen. Methoden und andere Hook-Funktionen. Über das props-Objekt können wir die übergebenen Parameter abrufen und eine Typprüfung durchführen. 🎜

Parameter über $route übergeben

🎜Eine andere Möglichkeit, Parameter zu übergeben, ist über $route. Auf diese Weise können wir die Routing-Parameter über das Objekt $route.params erhalten. Das Folgende ist ein Beispielcode: 🎜rrreee🎜Es ist zu beachten, dass wir bei Verwendung von $route RouteLocationNormalized und RouteParams statisch importieren müssen Typen Warten Sie auf Routing-bezogene Typen und führen Sie Typprüfungen für Parameter durch. 🎜rrreee🎜Zusammenfassung🎜🎜Die Verwendung von vue-router zur Übergabe von Routing-Parametern und zur Durchführung einer Typprüfung unter Vue3 ist eine sicherere und zuverlässigere Methode. Durch die Typprüfung von TypeScript können wir Laufzeitausnahmen vermeiden, die durch falsche Parameterübergabe verursacht werden, und die Stabilität des Codes verbessern. Gleichzeitig erleichtern uns neue Funktionen wie die von Vue3 eingeführte Funktion setup und Factory-Methoden die Verwaltung und Verarbeitung des Routings während des Entwicklungsprozesses. 🎜

Das obige ist der detaillierte Inhalt vonSo schreiben Sie Parameter ts im Vue3-Routing. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!