这是我参与「第四届青训营 」笔记创作活动的第7天

接着前面的几篇笔记，这篇笔记继续聊一聊在青训营大项目（仿掘金官网）中，使用vite构建工具部署项目时遇到的一些问题以及解决方案。

项目部署后的体验

在青训营的大项目基本完成后，尝试使用Github Page部署我们的项目，具体的布置方法可以查看项目开发-vite项目部署到github.io ｜ 青训营笔记。

部署到GIthub page之后，进行了一些测试。基本功能基本完善，也没布局也没有什么大的问题。但是当进行首页跳转到文章详情页面时出现了一些问题。

问题原因

经过查找，定位问题在跳转链接使用了普通的<a>标签。在使用vue-router的情况下应该利用标签<router-link>在组件间跳转。基本用法如下：

    <RouterLink  :to="`/post`">

简单修改了之后仍然有问题。虽然页面实现了跳转到文章详情的部分，但是页面无法直接回到页面顶部，体验不佳。对照官网的效果有了如下的进一步修改。

进一步解决

查找相关文档后，依然无法实现自动回到顶端的单页面，因此考虑和官网一样在新标签页中打开。因此有了下面的代码。

    <RouterLink tag="a" target="_blank" :to="`/post`">

和<a>标签一样，使用target属性控制在新的页面打开，使用tag属性将其渲染为特定的标签，这里就是将其渲染为<a>标签。

总结

被这个路由的问题困扰了不少时间，最后的解决方案也并不是特别的理想，对于vue-router的使用得到了一定的锻炼。总的来说，官方文档需要经常参阅，下面是参考文档。vue-router