1. 定义路由规则如下

import {createRouter,createWebHistory} from 'vue-router'
const router = createRouter({
   history:createWebHistory(),
   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"),
      }
   ]
})

export default router;

2. 路由跳转的方式，并传参

跳转模式：

push：记录历史记录

replace：不记录

<RouterLink replace  to="/">新闻</RouterLink>

router.replace("/")

使用内置组件RouterLink 跳转

// 传递 params 参数必须使用name跳转
<RouterLink :to="{
    name:'NewsTest',
    params:{
      name: '李四',
      age: 19
    },
    query:{
      a:1,
      b:2
    }
  }">
    新闻测试
  </RouterLink>

 编程式导航跳转

<script setup lang="ts">
import {useRouter} from "vue-router"
let router = useRouter()
const btn = ()=>{
  router.push({
    name:'NewsTest',
    params:{
      name: '李四',
      age: 19
    },
    query:{
      a:1,
      b:2
    }
  })
}
</script>

3. 接收query、params参数

第一种方式接收

<script setup lang="ts">
import { toRefs } from "vue";
import { useRoute } from "vue-router";

// 使用 useRoute 获取参数
const route = useRoute();
let {query} = route
let {params} = route

// 解构出来的不是响应式，需要用toRefs使其变成响应式
let {params} = toRefs(route)
let {query} = toRefs(route)
</script>

<template>
   <div>
     {{params.name}}
     {{params.age}}
     {{query.a}}
     {{query.b}}
   </div>
</template>

第二种路由的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
         // }
},