原创2026/3/5大约 1 分钟
除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现
<template>
<button @click="jump">跳转到about页面</button>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const jump = () => {
router.push('/about')
}
</script>当然也可以把第9行代码换成router.push({ path: "/about" })
如果你的路由有名字（命名路由）也可以写成router.push({ name: 'about' })
传递query参数
home.vue
<template>
<button @click="jump">跳转到about页面</button>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const jump = () => {
router.push({ path: '/about', query: { username: '刘春龙' } })
}
</script>about.vue
<template>
<p>{{ msg }}</p>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const msg = ref<any>('about页面')
onMounted(() => {
msg.value = route.query.username
})
</script>警告
import { useRouter,useRoute } from "vue-router"中useRouter和useRoute是两个不一样的东西，注意区分
传递params参数
home.vue
<template>
<button @click="jump">跳转到about页面</button>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
const jump = () => {
router.push({ name: 'about', params: { username: '刘春龙' } })
}
</script>about.vue
<template>
<p>{{ msg }}</p>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
const msg = ref<any>('about页面')
onMounted(() => {
msg.value = route.params.username
})
</script>警告
这里我们传递的参数为username,该参数名必须提前在路由文件中进行声明
{
path: '/about/:username',
name: 'about',
component: () => import('../views/AboutView.vue')
}至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。