Comment écrire le paramètre ts dans la route vue3

Vue3 est l'un des frameworks front-end actuellement populaires, avec une excellente modularisation et réactivité. vue-router est le plug-in de routage officiellement fourni par Vue, qui nous permet de passer d'une page à l'autre dans l'application frontale et d'implémenter une application monopage (SPA).

En développement, nous avons parfois besoin de passer des paramètres entre les itinéraires, comme sauter d'une page à une autre et afficher les données correspondantes. Ensuite, nous présenterons comment transmettre des paramètres via vue-router dans Vue3, combiné à la vérification de type TypeScript, pour éviter les exceptions d'exécution causées par un passage de paramètres incorrect.

Installer vue-router

Avant d'utiliser vue-router pour implémenter le saut de route, nous devons d'abord installer vue-router :

npm install vue-router@next

Définir les routes

Ensuite, nous devons définir les routes dans l'application Vue. Dans Vue3, les routes sont définies différemment que dans Vue2. Voici un exemple de code simple :

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;

Parmi eux, createRouter et createWebHistory sont des méthodes d'usine fournies par Vue3 pour créer des instances de routage et des gestionnaires d'historique. 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

Lors de la définition d'un itinéraire, nous devons spécifier le chemin, le nom de l'itinéraire et les composants. De plus, nous pouvons également transmettre les paramètres de chemin en tant que propriétés du composant en définissant props: true pour faciliter la réception des paramètres par le composant. 🎜🎜Saut d'itinéraire🎜🎜Ce qui suit est un exemple de code de saut d'itinéraire de base : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la méthode router.push pour effectuer un saut d'itinéraire. Parmi eux, name est le nom de la route de saut, params est l'objet paramètre transmis et sa clé interne correspond au nom du paramètre dans le chemin de routage. 🎜🎜Recevoir les paramètres🎜🎜Enfin, nous devons recevoir les paramètres dans le composant de page en cours de saut et effectuer une vérification de type. 🎜🎜Il existe deux façons de transmettre des paramètres. L'un se fait via props et l'autre via $route. Jetons un coup d'œil à l'implémentation spécifique de ces deux méthodes de passage de paramètres respectivement : 🎜

Passer des paramètres via des accessoires

🎜Lors de la définition des routes, nous pouvons utiliser l'option props pour utiliser les paramètres de routage à mesure que les propriétés des composants sont transmises. Voici un exemple de code : 🎜rrreee🎜Dans le composant, nous pouvons déclarer ces propriétés directement et effectuer une vérification de type via TypeScript. Voici un exemple de code : 🎜rrreee🎜Ici, nous utilisons la nouvelle fonction setup dans Vue3 pour remplacer les data et calculed dans Vue2, méthodes et autres fonctions de hook. Grâce à l'objet props, nous pouvons obtenir les paramètres transmis et effectuer une vérification de type. 🎜

Passer des paramètres via $route

🎜Une autre façon de transmettre des paramètres est via $route. De cette façon, nous pouvons obtenir les paramètres de routage via l'objet $route.params. Voici un exemple de code : 🎜rrreee🎜Il convient de noter que lors de l'utilisation de $route, nous devons importer RouteLocationNormalized et RouteParams via static types Attendez les types liés au routage et effectuez des vérifications de type sur les paramètres. 🎜rrreee🎜Résumé🎜🎜Utiliser vue-router pour transmettre les paramètres de routage et effectuer une vérification de type sous Vue3 est un moyen plus sûr et plus fiable. Grâce à la vérification de type de TypeScript, nous pouvons éviter les exceptions d'exécution causées par un passage de paramètres incorrect et améliorer la stabilité du code. Dans le même temps, de nouvelles fonctionnalités telles que la fonction setup et les méthodes d'usine introduites par Vue3 nous facilitent également la gestion et le traitement du routage pendant le processus de développement. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!