I've been working on vue-router for some time now, but I seem to have hit a roadblock. Despite going through numerous articles and documentation, I can't seem to find the solution.
Even after reading multiple tutorials on using vue-router, I'm still facing issues with my code.
Here's a brief overview of what I've done so far:
I've created three components - Home, Login, and HelloWorld.
I've also defined three routes in my code.
Let me share the relevant snippets:
main.js:
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
// import Home from './components/Home.vue';
import HelloWorld from './components/HelloWorld.vue';
import Login from './components/Login.vue';
Vue.use(VueRouter)
Vue.config.productionTip = false
const router = new VueRouter({
mode: 'history',
base: __dirname,
routes: [
{ path: '/hello', component: HelloWorld },
{ path: '/login', component: Login },
{ path: '/', component: App }
]
});
new Vue({
router,
render: h => h(App),
}).$mount('#app')
App.vue:
<template>
<div id="app">
<HelloWorld/>
<Login />
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import Login from './components/Login.vue'
export default {
name: 'app',
components: {
HelloWorld,
Login
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Neither of the routes are working as expected.
Every time I try to navigate by changing the URL, the base route (i.e., /) is always displayed.
Furthermore, it keeps showing the App.vue component instead of the intended ones.
Any help or insights would be greatly appreciated!