刚学Vue，设置了路由，页面没有显示，是什么原因？

Question

设置了路由跳转，组件没有显示（_）

网址有变化，但是页面一直都没东西
App.vue

<template>
  <div id="app">
    <nav class="navbar">
      <div class="navbar-brand">
        <img src="/image/c.png" alt="商城Logo" class="logo">
        <h1>在线商城</h1>
      </div>
      <div class="navbar-links">
        <router-link to="/">首页</router-link>
        <router-link to="/all-products">全部商品页</router-link>
        <router-link to="/shopcar">购物车页</router-link>
      </div>
      
    </nav>

    <router-view></router-view>

    <footer class="footer">
      <p>&copy; 2025 在线商城. All rights reserved.</p>
    </footer>
  </div>
</template>


<script>
export default {
  name: 'App'
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: white;
  padding: 10px 20px;
}

.navbar-brand {
  display: flex;
  align-items: center;
}

.logo {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.navbar-links {
  display: flex;
}

.navbar-links a {
  color: white;
  text-decoration: none;
  margin-left: 20px;
  padding: 5px 10px;
}

.navbar-links a.router-link-exact-active {
  background-color: #42b983;
  border-radius: 5px;
}

.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  width: 100%;
}
</style>

/router/index.js

import { createRouter, createWebHistory } from 'vue-router';
import ShouyeComponent from '../components/ShouyeComponent.vue';
import DianpuA from '../components/DianpuA.vue';
import DianpuB from '../components/DianpuB.vue';
import AllProductsComponent from '../components/AllProductsComponent.vue';
import ProductsComponent from '../components/ProductsComponent.vue';
import ShopcarComponent from '../components/ShopcarComponent.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: ShouyeComponent,
  },
  {
    path: '/dianpu-a',
    name: 'DianpuA',
    component: DianpuA,
  },
  {
    path: '/dianpu-b',
    name: 'DianpuB',
    component: DianpuB,
  },
  {
    path: '/all-products',
    name: 'AllProducts',
    component: AllProductsComponent,
  },
  {
    path: '/product/:id', // 使用动态路由匹配商品详情页
    name: 'Product',
    component: ProductsComponent,
  },
  {
    path: '/shopcar',
    name: 'Shopcar',
    component: ShopcarComponent,
  },
];



const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});


router.beforeEach((to, from, next) => {

  next();
  
});
export default router;

Main.js

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

createApp(App)
  .use(router)
  .use(store)
  .mount('#app');

ShouyeComponent.vue

<template>
  <div class="shouye">
    
    <div class="store-buttons">
      <router-link to="/dianpu-a">店铺A</router-link>
      <router-link to="/dianpu-b">店铺B</router-link>
    </div>
    <!-- 路由视图，用于显示路由匹配的组件 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'ShouyeComponent'
}
</script>

<style scoped>
.shouye {
  text-align: center;
  margin-top: 50px;
}
.store-buttons {
  margin-bottom: 20px;
}
.store-buttons button {
  margin: 0 10px;
  padding: 10px 20px;
  font-size: 16px;
}
</style>

AllProductsComponent.vue

<template>
  <div class="all-products">
    <h2>全部商品</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        <router-link :to="{ name: 'Product', params: { id: product.id } }">
          <img :src="product.image" alt="商品图片" class="product-image">
          <div class="product-info">
            <h3>{{ product.name }}</h3>
            <p>价格: ¥{{ product.price }}</p>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'AllProductsComponent',
  data() {
    return {
      products: [
        { id: 1, name: '商品A1', price: 100, image: '/image/b.jpg' },
        { id: 2, name: '商品A2', price: 200, image: '/image/b.jpg' },
        { id: 3, name: '商品A3', price: 300, image: '/image/b.jpg' },
        { id: 4, name: '商品A4', price: 400, image: '/image/b.jpg' },
        { id: 5, name: '商品A5', price: 500, image: '/image/b.jpg' },
        { id: 6, name: '商品A6', price: 600, image: '/image/b.jpg' },
        { id: 7, name: '商品A7', price: 700, image: '/image/b.jpg' },
        { id: 8, name: '商品A8', price: 800, image: '/image/b.jpg' }
      ]
    };
  }
}
</script>

<style scoped>
.all-products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.product-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
}
.product-info {
  text-align: center;
}
</style>

ShopcarComponent.vue

<template>
  <div class="shopcar">
    <h2>购物车</h2>
    <ul>
      <li v-for="item in cartItems" :key="item.id">
        {{ item.name }} - ¥{{ item.price }} x {{ item.quantity }}
        <button @click="decreaseQuantity(item.id)">-</button>
        <button @click="increaseQuantity(item.id)">+</button>
      </li>
    </ul>
    <p>总计: ¥{{ totalPrice }}</p>
  </div>
</template>

<script>
import { useStore } from 'vuex';

export default {
  name: 'ShopcarComponent',
  setup() {
    const store = useStore();
    const cartItems = store.state.cartItems;
    const totalPrice = store.getters.totalPrice;

    const increaseQuantity = (id) => {
      store.dispatch('updateQuantity', { productId: id, quantity: 1 });
    };

    const decreaseQuantity = (id) => {
      const item = store.state.cartItems.find(i => i.id === id);
      if (item.quantity > 1) {
        store.dispatch('updateQuantity', { productId: id, quantity: -1 });
      }
    };

    return { cartItems, totalPrice, increaseQuantity, decreaseQuantity };
  }
}
</script>

<style scoped>
.shopcar {
  text-align: center;
}
</style>

大佬帮我看看呗

Answer 1

尝试复制你的代码运行，能正确展示

查看你的控制台是否有报错