Trying to work with the vue-router, but encountering difficulty importing components into the router.js.
Received a warning:
[Vue Router warn]: No match found for location with path "/"In need of assistance as I'm unsure of what mistake I might be making.
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'
//Attempts made to import components
//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
Desired outcome is to open the component in a new window using this code:
methods: {
after_button_click() {
let route = this.$router.resolve({ name: "TEST" });
window.open(route.href, "_blank");
},
}
INFO: No error messages received but functionality not working properly.