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 is my router index.js file and below 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>
I'm following a tutorial, can't figure out what I've missed because the links aren't working. I've added the paths in the index file, installed vue-router (this was an issue), but my landing page appears as plain text.
On changing the order of use before mount below, I'm not getting an error:
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.
Thanks for the link to the repo, that really helped me see the issues:
npm i vue-router
App.vue file. This works:<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>
<button @click="toggleSidebar" class="top-bar-cart-link">
<i class="icofont-cart-alt icofont-1x"></i>
<span>Cart ({{ totalQuantity }})</span>
</button>
</nav>
</header>
<router-view />
</template>
<script>
export default {
name: "App",
data() {
return {
totalQuantity: 10,
};
},
methods: {
toggleSidebar() {
console.log("toggling sidebar");
},
},
};
</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>