0

I'm using vue3 for my project, th first project I'v built worked correctly with component and router, but now, when I wanna call my Header and Router Component in my Home page it opens another file for the tags. but still the import ones have a valid destinations. enter image description here

something like this opens when I ctrl+click the tags in template enter image description here

but the link in script I imported works fine with component destinations. also I imported routes like this in 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
Sanaz Baghban
  • 135
  • 2
  • 16
  • 1
    It sounds like the problem you're seeing is that clicking the `
    ` doesn't open your `Header.vue` component, but the component renders fine. This isn't a rendering issue, but an IDE issue.
     – tony19 Jun 30 '21 at 06:37
  • no it was for rendering. I've searched a bit and this link saved me [https://stackoverflow.com/questions/66024797/vue-3-failed-to-resolve-component-with-global-components] – Sanaz Baghban Jun 30 '21 at 11:06
  • Then your question is misleading because it highlights the fact that an unexpected file opens when you ctrl+click the file path in your IDE. Why do you think that was relevant? – tony19 Jun 30 '21 at 19:21

1 Answers1

0

Try importing your vue components by adding the .vue extension.

So instead of

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

Try

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

O.S.Kaya
  • 108
  • 2
  • 8