vue3 路由器不显示我的组件

Posted 2023-02-23

【中文标题】vue3 路由器不显示我的组件

【英文标题】：vue3 router doesn't display my components

【发布时间】：2021-09-12 06:12:35

【问题描述】：

我在我的项目中使用 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

【问题讨论】：

听起来您看到的问题是单击<Header> 不会打开您的Header.vue 组件，但该组件呈现正常。这不是渲染问题，而是 IDE 问题。

不，它是用于渲染的。我搜索了一下，这个链接救了我 [***.com/questions/66024797/…

那么您的问题具有误导性，因为它强调了当您在 IDE 中按 ctrl+单击文件路径时会打开一个意外文件的事实。为什么你认为这是相关的？

【参考方案1】：

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

所以不是

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

试试

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