9、Vue 3 - Vue Router 使用实录 : 编程式路由

实现本节内容之前，请先实现上一篇文章的代码。

本节通过编程式路由来实现路由跳转的功能。

1、修改代码

src/views/HomeView.vue

<template>
    <div class="container bg-primary p-5 text-white">
        首页

        <!-- 1、添加点击跳转按钮 -->
        <div>
            <button class="btn btn-warning btn-lg" @click="clickToAbout">关于我</button>
        </div>
    </div>


    <div class="bg-success py-5">
        <p class="text-center text-white">嵌套路由</p>
        <!--多个渲染嵌套路由-->
        <router-view name="contact"></router-view>
    </div>

    <div class="bg-success py-5">
        <p class="text-center text-white">嵌套路由</p>
        <!--多个渲染嵌套路由-->
        <router-view name="category"></router-view>
    </div>

</template>

<script setup lang="ts">
    // 2、引入函数
    import { useRouter } from 'vue-router';
    // 3、赋值
    const router = useRouter();
    const clickToAbout = () => {
        // 4、跳转：name 的值为路由名称中的 name
        router.push({name:'about'})
    }
</script>

2、测试

访问 http://localhost:5173/home 可以看到有一个 关于我 的按钮，点击它就可以进行路由跳转了。

3、第二种方式（学习）

src/views/HomeView.vue

...

<script setup lang="ts">
    // 2、引入函数
    import router from '@/router';

    const clickToAbout = () => {
        // 3、跳转：name 的值为路由名称中的 name
        router.push({name:'about'})
    }
</script>