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.query
      console.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> 语法更有优势。