vue3 vite ts 编程式路由导航

一、区别

1、获取路由器

let router = useRouter()

2、使用

router.push({
    name:'detail',
    query:news
})

二、案例

<template>
  <ul>
    <button v-for="news in newList" :key="news.id" @click="showNew(news)">{{ news.name }}</button>
  </ul>

  <div>
    <RouterView></RouterView>
  </div>
</template>

<script lang="ts" setup name="News">
    import { reactive } from "vue";
    import {RouterView, RouterLink, useRouter} from 'vue-router'
    let newList = reactive([
        {id:'01', name:'小米', content:'小米汽车'},
        {id:'02', name:'理想', content:'大SUV'},
        {id:'03', name:'小鹏', content:'智驾汽车'}
    ])
    // 获取路由器
    let router = useRouter()
    // 编程式路由导航
    function showNew(news){
      router.push({
        name:'detail',
        query:news
      })
    }
</script>

<style>

</style>