I've encountered an issue with the router-link component in Vue.js 2. I have set up my router file
index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import HomeView from '../views/HomeView.vue';
import OrdersView from '../views/OrdersView.vue';
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/order',
name: 'order',
Component: OrdersView
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
});
export default router;
})
HomeView.vue
<template>
<p>HomeView</p>
</template>
<script>
export default {}
</script>
OrdersView.vue
<template>
<p>OrdersView</p>
</template>
<script>
export default {}
</script>
App.vue
<template>
<div id="app">
<div class="sidebar-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<router-link to="/order">Orders</router-link>
</li>
</ul>
</div>
<div class="container-fluid">
<div class="row">
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
<router-view/>
</main>
</div>
<div>
</div>
</template>
When launching my application, I encounter an error where clicking on the router link for Orders does not display the content of OrdersView in the router-view section of App.vue.
If anyone can assist me in understanding why the content of OrderView.vue is not being displayed in the app.vue (router-view section), that would be greatly appreciated.