Vue应用router-link导航按钮未在右上角正常显示问题求助

问题排查解决步骤 #

• 问题1：Bulma导航栏菜单默认移动端隐藏、未配置交互逻辑
  你使用的Bulma框架的navbar-menu组件默认规则为：视口宽度≥1024px的桌面端自动展开显示，视口宽度<1024px的移动端默认隐藏，需要配合汉堡按钮的交互逻辑手动控制显示状态。
  你需要在App.vue中补充script逻辑，示例如下：

<script setup>
import { ref } from 'vue'
const isMenuActive = ref(false)
</script>

然后修改模板中对应的两个节点：

<!-- 给汉堡按钮绑定点击事件，动态加is-active类 -->
<a 
  class="navbar-burger" 
  :class="{'is-active': isMenuActive}"
  aria-label="menu" 
  aria-expanded="false" 
  data-target="navbar-menu"
  @click="isMenuActive = !isMenuActive"
>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
</a>

<!-- 给导航菜单动态绑定is-active类 -->
<div class="navbar-menu" :class="{'is-active': isMenuActive}" id="navbar-menu">

修改后桌面端会自动显示右上角导航按钮，移动端点击汉堡按钮即可展开看到导航按钮。

• 问题2：路由配置缺失
  你当前router/index.js中仅注册了首页和关于页的路由，模板中用到的/summer、/winter、/log-in、/cart四个路由均未注册，后续点击会触发路由报错，建议补充对应路由配置和页面组件。

• 问题3：Font Awesome图标依赖缺失
  购物车按钮用到了fas fa-shopping-cart图标，需要确保项目已引入Font Awesome依赖，否则图标位置会显示空白。你可以通过npm安装对应依赖，也可以在index.html的head标签中引入CDN资源：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

内容的提问来源于stack exchange，提问作者Lacey