vue3动态路由

1.动态路由

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：

1.params传参

可以直接在链接上传递参数

<router-link to="/home/lucky">home</router-link>

在当前的路由需要指定一下传递的属性名字

{
    //对应的路径
    //指定name属性
    path: '/home/:name',
    //路由对应的名字
    name:'Home',
    //对应的组件
    component:()=>import("../components/Home.vue"),
    meta: {
      keepAlive: true,
      title:'home'
    }
  },

获取传递的属性值:

 <p>params传参:{{$route.params.name}}</p>

还可以传递多个参数:

//router-link链接

 <router-link to="/home/lucky/1003015">home</router-link>

 //相关路由
 {
    //对应的路径
    path: '/home/:name/:id',
    //路由对应的名字
    name:'Home',
    //对应的组件
    component:()=>import("../components/Home.vue"),
    meta: {
      keepAlive: true,
      title:'home'
    }
  }

  //home.vue组件
  <p>params传参:name:{{$route.params.name}},id:{{$route.params.id}}</p>

2.query传参

//router-link链接

<router-link to="/about?title=文章列表&id=100813">about</router-link>
//相关路由不需要配置

//about.vue组件
<p>query传参,title:{{$route.query.title}},id:{{$route.query.id}}</p>