在上一篇文章中，我们实现了注册功能的后端，这次就可以实现注册的前端实现了。
准备工作
一直以来我们都是在一个页面上来进行前端的开发。因为我们需要把博客做成一个完整的大项目，因此注册界面一定是在一个新的页面中，而不是主页。我们先建立一个新的Vue组件register作为页面放到pages文件夹中。
<script setup>
</script>
<template>
注册页面
</template>
目前有了一个新的组件，我们也知道组件应该如何显示在页面上，但是我们想让组件和主页之间是两个页面的关系，这就需要用到路由跳转了。为什么路由还要注册？为什么不用常规的超链接？我们都知道浏览器只能访问HTML文件，而你的vue组件并不是一个html文件，你访问的地址也是127.0.0.1:5173而不是127.0.0.1:5173/index.html，因此想要在网站下面建立新的页面就必须要进行路由管理。
Vue Router初始化
Vue的路由跳转使用的是Vue Router插件，这是Vue官方推荐的插件，与原生集成度很高。我们现在main.js中创建路由的规则。
import { createApp } from 'vue'
import * as vueRouter from 'vue-router'
import App from './App.vue'
import './assets/main.css'
const router = vueRouter.createRouter({
history: vueRouter.createWebHistory(), // 历史记录的模式，这里使用HTML5模式
routes: routes,// 路由列表，也可以简写为routes，不过routes对象目前还没有定义
})
const app = createApp(App);
app.use(router); // 把路由挂载到整个vueAPP上
app.mount('#app');
我们看到历史记录是分各种不同的模式的，这里稍微介绍一下不同的模式。首先就是hash模式（使用createWebHashHistory创建），它使用类似于网页定位的方法来区分不同的网页，因此链接类型都是localhost/#/register这样，优点是后面的部分不会被传到服务器上，不需要进行特殊的处理；而另一种模式的链接就和我们正常的链接一样local/register，但是如果碰到了404错误的话我们就需要手动写一个404页面了（毕竟本身链接代表的文件本身都不存在）。
路由列表定义
完成了这些就该定义路由列表了，目前我们只需要两个路由：首页和注册页面，以后添加新的页面的时候别忘了把路由添加进来就好。不过在这之前，我们最好把首页给挪到一个新的页面中去，因为需要有一个入口来对这些组件进行显示。在/pages文件夹中创建一个home.vue即可
const routes =[
{path: '/', component: home},
{path: '/register', component: register}
]
启动项目，会发现什么都没有！这是因为我们还没有设置这些路由对应的组件应该放在哪里。我们把已经被搬空了的App.vue中添加一个路由视窗组件<router-view>，这样路由所指向的组件就会显示在对应的元素中。
<script setup>
</script>
<template>
<router-view></router-view>
</template>
<style scoped>
</style>
然后我们访问对应的链接，就可以看到对应的页面了。
简易导航栏
只通过链接跳转的话未免显得很麻烦，因此我们可以尝试制作一个简单的系统导航栏，在App.vue中添加一组路由按钮。路由按钮使用的是route-link标签创建，而不是通常的a标签，这样就可以在不刷新页面的情况下更改页面的内容。
<script setup>
</script>
<template>
<button>
<router-link to="/">主页</router-link>
</button>
<button>
<router-link to="/register">注册</router-link>
</button>
<router-view></router-view>
</template>
<style scoped>
</style>
虽然可以进行页面的跳转了，但是依旧存在一些问题，就是只有在我们点击文字的时候才能够跳转，而button标签本身是不带有路由属性的，因此我们不如让按钮直接实现路由跳转的功能。
<script setup>
import {useRouter, useRoute} from 'vue-router'
const router = useRouter();// setup的组合式不存在挂载的this，所以需要使用对应的方法来获取router和routes
const route =useRoute();
function routerTo(event){ // 参数默认为事件本身
const button = event.target; // event.target代表着事件的作用目标，也就是点击的按钮
router.push(button.dataset.to); // 使用data前缀规定的自定义属性都规定在了dataset属性中
}
</script>
<template>
<!-- 我们的自定义属性不能直接通过button.to获取，因此这里使用data前缀属性 -->
<button data-to = "/" @click="routerTo">主页</button>
<button data-to ="/register" @click="routerTo">注册</button>
<router-view></router-view>
</template>
<style scoped>
</style>
现在我们可以通过点击按钮本身来进行跳转了。