CODEWITHSUNDEEP
javascriptvue.jscomponentsvuejs3vue-router
B0BBY
B0BBY

Reputation: 1109

can't import components inside of my router.js (VueJS)

I want to work with vue-router, but I'm not able to import my components into my router.js.

I also get following warning: [Vue Router warn]: No match found for location with path "/"

I actually don't know what I'm doing wrong.. hopefully someone can help me out.

MAIN.JS

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

import '@popperjs/core'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-icons/font/bootstrap-icons.css'
import store from './store/store.ts'

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

ROUTER.JS

import { createRouter, createWebHistory  } from 'vue-router'

//I've tried following to import but non of these are working out for me
//import test from "../components/test.vue";
//const test= () => import("../components/test.vue");

export default createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes: [
      {
        path: "/test",
        name: "TEST",
        component: () => import("../components/test.vue")
      }
    ]
  });

MY STRUCTURE

- src
    - assets
    - store
    - components
        - test.vue
    - router
        - router.js
    - App.vue
    - main.js

afterwards I want to open the component in a new window like this:

methods: {
  after_button_click() {
    let route = this.$router.resolve({ name: "TEST" });
    window.open(route.href, "_blank");
  },
}

INFO: I don't get any errors but it's not working.

Upvotes: 0

Views: 574

Answers (1)

sBurst
sBurst

Reputation: 26

I have a similar setup in my application and this works for me:

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

index.js (inside './router'

import { createRouter, createWebHistory } from 'vue-router'
import TestComponent from '../components/TestComponent.vue'

const routes = [
  {
    path: '/test',
    name: 'test',
    component: TestComponent

  }]
const router = createRouter({
  history: createWebHistory("/"),
  routes
})

export default router

This should give you a working router when you browse to /test.

Hope this helps!

Upvotes: 1

Related Questions