Vue3.x动态路由、命名路由和编程式导航

1.动态路由的定义和使用

两种方法 ：

        1.路由中的动态传参以 : 进行声明，冒号后面跟的是动态参数名（path: 'apple/:mid'），通过{ { $route.params.mid }}进行接收

        2.声明属性props:true，选项，以props的形式接收动态路由中的参数

{
      path: '/fruit',
      component: MyFruit,
      //子路由重定向
      redirect: '/fruit/apple/:mid',
      //声明props:true，选项，以props的形式接收动态路由中的参数
      props: true,
      children: [
        //路由中的动态传参以 : 进行声明，冒号后面跟的是动态参数名
        { path: 'apple/:mid', component: MyApple, props: true },
        { path: 'orange/:mid', component: MyOrange, props: true }
      ]
    },

<template>
  <div class="">
    <h3>水果-------{
  { $route.params.mid }}</h3>
    <p>---{
  { mid }}</p>
    <router-link to="/fruit/apple/1" >