vue3 路由器不显示我的组件

Question

我在我的项目中使用 vue3，我构建的第一个项目与组件和路由器一起正常工作，但是现在，当我想在我的主页中调用我的 Header 和 Router 组件时，它会为标签打开另一个文件。但进口的仍然有一个有效的目的地。

当我 ctrl+单击模板中的标签时会打开类似的东西

但我导入的脚本中的链接适用于组件目标。 我也在 index.js 中导入了这样的路由：

    import { createRouter, createWebHistory } from 'vue-router'
import Home from '../pages/home/Home'
import Dashboard from "../pages/dashboard/Dashboard";
import addressProfile from "../pages/dashboard/addressProfile";
import editAddress from "../pages/dashboard/editAddress";
import dashAmar from "../pages/dashboard/dashAmar";
import dashBuy from "../pages/dashboard/dashBuy";
import dashCart from "../pages/dashboard/dashCart";
import dashSabt from "../pages/dashboard/dashSabt";
import dashSupport from "../pages/dashboard/dashSupport";
import Login from "../pages/login/Login";
import LoginVerify from "../pages/login/loginVerify";
import Blogs from "../pages/blogs/Blogs";
import singleBlog from "../pages/blogs/singleBlog";
import products from "../pages/products/products";
import productsFilter from "../pages/products/productsFilter";
import Error from "../pages/404/Error";

const routes = [
  {path: '/', name: 'Home', component: Home},
  {path: '/dashboard', name: 'Dashboard', component: Dashboard},
  {path: '/dashboard/:id', name: 'addressProfile', component: addressProfile},
  {path: '/dashboard/:id', name: 'editAddress', component: editAddress},
  {path: '/dashboard/:id', name: 'dashAmar', component: dashAmar},
  {path: '/dashboard/:id', name: 'dashBuy', component: dashBuy},
  {path: '/dashboard/:id', name: 'dashCart', component: dashCart},
  {path: '/dashboard/:id', name: 'dashSabt', component: dashSabt},
  {path: '/dashboard/:id', name: 'dashSupport', component: dashSupport},
  {path: '/login', name: 'Login', component: Login},
  {path: '/login/:id', name: 'LoginVerify', component: LoginVerify},
  {path: '/blogs', name: 'Blogs', component: Blogs},
  {path: '/blogs/:id', name: 'singleBlog', component: singleBlog},
  {path: '/products', name: 'products', component: products},
  {path: '/products/:id', name: 'productsFilter', component: productsFilter},
  {path: '/error', name: 'Error', component: Error},
]

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

export default router

Answer 1

尝试通过添加 .vue 扩展名来导入您的 vue 组件。

所以不是

import Blogs from "../pages/blogs/Blogs";

试试

import Blogs from "../pages/blogs/Blogs.vue";