Vue App 不显示反应器链接片段
Posted
技术标签:
【中文标题】Vue App 不显示反应器链接片段【英文标题】：Vue App Not Displaying reactor-link pieces 【发布时间】：2021-10-07 08:50:14 【问题描述】：我正在尝试学习使用 Vue 的教程，但遇到了困难。我不确定为什么我的按钮显示不正确。我在哪里搞砸了？提前感谢您的帮助。
从图片中： 预期结果：右上角的按钮 实际结果：右上角的按钮不见了
App.vue：
<template>
<div id="wrapper">
<nav class="navbar is-dark">
<div class="navbar-brand">
<router-link to="/" class="navbar-item"><strong>Djackets</strong></router-link>
<a class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbar-menu">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu" id="navbar-menu">
<div class="navbar-end">
<router-link to="/summer" class="navbar-item">Summer</router-link>
<router-link to="/winter" class="navbar-item">Winter</router-link>
<div class="navbar-item">
<div class="buttons">
<router-link to="/log-in" class="button is-light">Log In</router-link>
<router-link to="/cart" class="button is-success">
<span class="icon"><i class="fas fa-shopping-cart"></i></span>
<span>Cart</span>
</router-link>
</div>
</div>
</div>
</div>
</nav>
<section class="section">
<router-view/>
</section>
<footer class="footer">
<p class="has-text-centered">Copyright (c) 2021</p>
</footer>
</div>
</template>
<style lang="scss">
@import '../node_modules/bulma';
</style>
index.html:
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without javascript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
路由器/index.js：
import createRouter, createWebHistory from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
path: '/',
name: 'Home',
component: Home
,
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
]
const router = createRouter(
history: createWebHistory(process.env.BASE_URL),
routes
)
export default router
Expected Vue: Missing icons on top right
Actual Result: Missing icons on top right
【问题讨论】：
【参考方案1】：好的，所以代码都是正确的，问题与尺寸有关。设备显示小，激活了尚未配置的手机版。
在使用更大的屏幕时，或者在无法使用更大的屏幕时调整缩放，按钮会按应有的方式显示。
【讨论】：
以上是关于Vue App 不显示反应器链接片段的主要内容，如果未能解决你的问题，请参考以下文章