7、Vue 3 - Vue Router 使用实录 : router-link 路由跳转

在上篇的案例中，我们是通过手动修改路由进行访问的，此时，页面刷新，状态丢失。如果需要记住某些状态，需要使用 router-link 进行跳转，此时，页面不会刷新。

我们基于上篇的案例进行相关改造。

1、router-link 使用

src/views/ContactView.vue

<template>
    <router-link to="/home/category" class="text-white">分类</router-link>

    <div class="container bg-primary">
        <h3>联系我</h3>
    </div>
</template>

src/views/CategoryView.vue

<template>
    <router-link to="/home/contact" class="text-white">联系我</router-link>
    
    <div class="container bg-primary">
        <h3>分类</h3>
    </div>
</template>

2、访问测试

访问：http://localhost:5173/home/contact，然后点击分类按钮，发现页面跳转且没有刷新页面。