• /data/:id这个路由匹配/data/1,/data/2这里的 id 叫 params

• /data?id=1 /data?id=2 这里的 id 叫 query

• 当你使用params方法传参的时候，要在路由后面加参数名，并且传参的时候，参数名要跟路由后面设置的参数名对应。

• 使用query方法，就没有这种限制，直接在跳转里面用就可以.

 
const router = createRouter({
    routes:[
      {
         name:"Home",
         path:"/home",
         component:()=>import("../views/home.vue"),
      },
      {
         name:"News",
         path:"/news/:name/:age",
         component:()=>import("../views/news.vue"),
      },
      {
         name:"NewsTest",
         // 传递 params 参数必须在此声明/:name/:age?
         // :age? 问号代表此参数可传可不传
         path:"/newsText/:name/:age?",
         component:()=>import("../views/news.vue"),
      }
   ]
}) 

路由-query参数

• 路由的查询参数是一种在URL中传递数据的机制。它们可以用于在不同的路由之间传递参数

• 注意这里是用name配置项的 ，而不是用path配置项。

router.push({
    name:'xiangqing',
    params:{
        id:news.id,
        title:news.title,
        content:news.content
    } 
})

路由的props：将query或params参数以props的形式传递给组件

• 如：<News :name="name" :age="age“>

• 接收参数：defineProps(["name","age"])

{
         name:"News",
         path:"/news/:name/:age",
         component:()=>import("../views/news.vue"),

         // 简单写法：将params参数以propa形式传递给组件 <News :name="name" :age="age">
         // props:true,


         // 函数写法：可指定将query参数以propa形式传递给组件
         props(route) {
            return route.query
         },
         // 对象写法：将数据写死
         // props:{
         //    name:"张三",
         //    age:18
         // }
},