Al agregar vue-router a su aplicación Vue, parece que tiene muchas opciones. He visto lo siguiente:
import VueRouter from 'vue-router' const router = new VueRouter({ base: '/app', mode: 'history', routes, }) export default { name: 'App', components: {}, router, }o
// /router/index.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ base: '/app', mode: 'history', routes, })o
const router = VueRouter.createRouter({ base: '/app', mode: 'history', routes, }) const app = Vue.createApp({}) app.use(router)¿Cómo difieren estos? ¿Cuál es la manera correcta?
Los primeros dos bloques de código demuestran cómo inicializar una aplicación Vue 2 con Vue Router 3 . Sin embargo, la definición del componente de la App exportada en el primer bloque de código normalmente se pasa al constructor de Vue (es decir, new Vue({ /* App component definition */ }) ).
El último bloque de código demuestra cómo inicializar una aplicación Vue 3 con Vue Router 4 .
Tenga en cuenta que la combinación de Vue Router y las versiones de Vue mencionadas anteriormente no se pueden mezclar. Es decir, Vue 2 solo puede usar Vue Router 3; y Vue 3 solo puede usar Vue Router 4.