Vue3+ts实现页面跳转及参数传递

## 列表页

<script lang="ts" setup>
import { reactive, toRefs } from 'vue'
// 1 引入useRouter路由信息方法
import { useRouter } from 'vue-router'
// 2 获取实例
const router = useRouter()const gotoDetail  = (index: string) =>  {router.push({path: '/demo2',query: {id: index}})
}</script>

## 详情页

<script lang="ts" setup >
import {ref, reactive, toRefs,onMounted} from 'vue'
// 1 引入useRouter路由信息方法
import { useRoute } from 'vue-router'
// 2 获取实例
const route = useRoute()const { id,name } = route.query// 获取列表const getDetail = async (id: string) => {try {const { data } = await GetDetail(id)console.log(data)msg.value = data} catch (error) {showFailToast("请求失败")}}onMounted( async () => {const { id } = route.queryconsole.log("messageId"+id+",name"+name)const res = await getDetail(id+"")})</script>

useRouter():

router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。

router.push({path:‘home’});本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录,  query: {id: index} 绑定参数。

useRoute()

route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等：

query: 对象，包含路由中查询参数的键值对。 例如，对于 /detail?id=1 ,通过route.query可以获取到id的值

onMounted

是一个生命周期钩子函数，用于在组件挂载到 DOM 上之后执行一些操作，onMounted 钩子是通过 setup函数来使用的。<script setup >是一种语法糖写法，比普通的 <script> 语法更有优势。