import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Products from '../views/Products.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/products',
name: 'Products',
component: Products
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
This code snippet represents the index.js file for my router. Below is a snippet from my app.vue file.
<template>
<header class="top-bar spread">
<nav class="top-bar-nav">
<router-link to="/" class="top-bar-link">
<i class="icofont-spoon-and-fork"></i>
<span>Home</span>
</router-link>
<router-link to="/products" class="top-bar-link">
<span>Products</span>
</router-link>
<router-link to="/past-orders" class="top-bar-link">
<span>Past Orders</span>
</router-link>
</nav>
<router-link @click="toggleSidebar" href="#" class="top-bar-cart-link">
<i class="icofont-cart-alt icofont-1x"></i>
<span>Cart ({{totalQuantity}})</span>
</router-link>
</header>
<router-view/>
</template>
<script>
export default {
name: 'App',
}
</script>
Currently, I'm following a tutorial and experiencing issues with my links not working. Despite setting up paths in the index file and installing vue-router correctly, my landing page displays plain text only.
When I change the order of 'use' before mount as shown below, I do not encounter any errors:
const app = createApp(App); app.use(router); app.mount('#app');Error:
Uncaught TypeError: Cannot destructure property 'options' of '(0 , vue__WEBPACK_IMPORTED_MODULE_1__.inject)(...)' as it is undefined.