编程式导航

除了使用 <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参数

<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>

<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参数

<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>

<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')
}