I'm currently in the process of integrating Vue Router into one of my projects to enable navigation between different pages.
Since I'm not very familiar with Vue Router, there's a chance I may have made a mistake in the setup.
import {createRouter, createWebHistory} from 'vue-router'
import App from '../App'
import Test from '../Views/Test'
const router = createRouter({
history: createWebHistory(),
routes: [
{
path:'',
name: 'App',
component: App,
},
{
path:'/test',
name: 'Test',
component: Test
}
]
})
export default router
This is the content of my index.js file. The issue I'm facing is that when I run my code, I can view the App page without any problems. However, if I manually access http://localhost:8080/test, I encounter an error stating that the page could not be found.
Could someone assist me with this problem?
Thank you!
UPDATE
I made some changes and now I'm able to access my pages, but only through a router-link.
I have included a First.vue page where I can decide to navigate to either App.vue or Test.vue.
My First.vue:
<template>
<router-view></router-view>
<router-link to='/app'>Go to application</router-link>
<br>
<router-link to='/test'>Go to test</router-link>
</template>
and my `index.js` has been updated to:
import {createRouter, createWebHistory} from 'vue-router'
import App from '../App.vue'
import Test from '../Views/Test.vue'
import First from '../Views/First.vue'
const router = createRouter({
history: createWebHistory(),
routes: [
{
path:'/',
name: 'First',
component: First,
},
{
path:'/test',
name: 'Test',
component: Test
},
{
path:'/app',
name: 'App',
component: App
}
]
})
export default router