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

Este es el archivo index.js de mi enrutador y debajo de mi archivo app.vue.

 <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>

Estoy siguiendo un tutorial, no puedo entender lo que me perdí porque los enlaces no funcionan. Agregué las rutas en el archivo de índice, instalé vue-router (esto fue un problema), pero mi página de destino aparece como texto sin formato.

Al cambiar el orden de uso antes del montaje a continuación, no recibo un error: const app = createApp(App); app.use(router); app.mount('#app');

Error:

TypeError no capturado: no se puede desestructurar la propiedad 'opciones' de '(0, vue__WEBPACK_IMPORTED_MODULE_1__.inject) (...)' porque no está definido.