编程式导航

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现

在 Vue 实例中，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push

选项式API

xxxxxxxxxx
<template>
    <h3>Home首页</h3>
    <button @click="clickHandler">跳转到About页面</button>
</template>
<script>
export default {
    methods:{
        clickHandler(){
            this.$router.push("/about")
        }
    }
}
</script>

组合式API

xxxxxxxxxx
<template>
    <h3>About关于页面</h3>
    <button @click="clickHandler">跳转到首页</button>
</template>
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
function clickHandler(){
    router.push("/")
}
</script>

实时效果反馈

1.在Vue路由中，下列那个可以实现编程式导航跳转：

A this.$router.push()

B this.push()

C push()

D $router.push()

答案

1=>A