vue-router4.x useRouter 获取路由器，用来跳转

最新推荐文章于 2025-04-04 10:56:48 发布

爱生活，爱编程

最新推荐文章于 2025-04-04 10:56:48 发布

阅读量1.2w

点赞数 1

分类专栏： typescript composition

本文链接：https://blog.youkuaiyun.com/qq_15009739/article/details/110915330

版权

typescript 同时被 2 个专栏收录

28 篇文章

订阅专栏

composition

25 篇文章

订阅专栏

本文主要介绍了在Vue Router 4.x版本中，如何使用useRouter Hook来获取路由器实例，进而实现应用程序内的路由跳转操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
<div class="bg">
    <h2>{{title}}</h2>
    <h2>{{age}}</h2>
    <!-- <pre>
        
        {{route}}
    </pre> -->
  
    <p>
        动态的跳转路由
        <a @click.prevent="jump">跳转到news路由组件</a>
    </p>
</div>
  
</template>


<script lang="ts">
import {defineComponent,reactive,toRefs}from 'vue';
import {useRoute,useRouter} from "vue-router"

 export default  defineComponent({
     setup(props,context){
         let data = {
           ...props
         }
        const router = useRouter();
         const jump = ()=>{
             
             router.push("/news")
         }
         const methods = {
             jump
         }
         const data2 = reactive(data)
         const route = useRoute();
         console.log(route)
         return {
             ...toRefs(data2),
             route,
             ...methods
             
         }
     },
     props:{
           title:{
               type:String,
               required:false,
               default:"rongrong"
           },
            age:{
                   type:Number,
                   default:18 
            }
     }
 })
</script>

<style>
    .bg {
        background:#CCC;
    }
</style>

重点很简单，就是useRouter （）可以获取路由器，用来进行路由的跳转