Migración desde Vue Router 0.7.x

Solo Vue Router 2 es compatible con Vue 2, por lo que si está actualizando Vue, también deberá actualizar Vue Router. Es por eso que hemos incluido detalles sobre la migración aquí en los documentos principales. Para obtener una guía completa sobre el uso del nuevo Vue Router, consulte la documentación de Vue Router.

Inicialización de Router

router.start reemplazado

Ya no hay una API especial para inicializar una aplicación con Vue Router. Eso significa que en lugar de:

router.start({
template: '<router-view></router-view>'
}, '#app')

Se pasa una propiedad router a una instancia de Vue:

new Vue({
el: '#app',
router: router,
template: '<router-view></router-view>'
})

O, si está utilizando la versión de Vue solo en tiempo de ejecución:

new Vue({
el: '#app',
router: router,
render: h => h('router-view')
})

Ruta de actualización

Ejecute el ayudante de migración en su código base para encontrar ejemplos de llamadas a router.start.

Definiciones de ruta

router.map reemplazado

Las rutas ahora se definen como una matriz en una opción routes en la instanciación del router. Así que estas rutas por ejemplo:

router.map({
'/foo': {
component: Foo
},
'/bar': {
component: Bar
}
})

Serán en cambio definidas de la siguiente forma:

var router = new VueRouter({
routes: [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
})

La sintaxis de arreglo permite una coincidencia de ruta más predecible, ya que no se garantiza que la iteración sobre un objeto use el mismo orden de claves en los navegadores.

Ruta de actualización

Ejecute el asistente de migración en código base para encontrar ejemplos de cómo se llama a router.map.

router.on removido

Si necesita generar rutas mediante programación al iniciar su aplicación, puede hacerlo agregando dinámicamente las definiciones a un arreglo de rutas. Por ejemplo:

// Rutas base normales
var routes = [
// ...
]

// Rutas generadas dinámicamente
marketingPages.forEach(function (page) {
routes.push({
path: '/marketing/' + page.slug
component: {
extends: MarketingComponent
data: function () {
return { page: page }
}
}
})
})

var router = new Router({
routes: routes
})

Si necesita agregar nuevas rutas después de que se haya creado una instancia del router, puede reemplazar el emparejador del router por uno nuevo que incluya la ruta que desea agregar:

router.match = createMatcher(
[{
path: '/my/new/path',
component: MyComponent
}].concat(router.options.routes)
)

Ruta de actualización

Ejecute el asistente de migración en su código base para encontrar ejemplos de llamadas a router.on.

router.beforeEach cambió

router.beforeEach ahora funciona de forma asíncrona y toma una función next como tercer argumento.

router.beforeEach(function (transition) {
if (transition.to.path === '/forbidden') {
transition.abort()
} else {
transition.next()
}
})
router.beforeEach(function (to, from, next) {
if (to.path === '/forbidden') {
next(false)
} else {
next()
}
})

subRoutes renombrado

Renombrado a children por consistencia entre Vue y cualquier otra librería de ruteo.

Ruta de actualización

Ejecute el asistente de migración en su código base para encontrar ejemplos de la opción subRoutes.

router.redirect reemplazado

Esto es ahora una opción en la definición de la ruta. Por ejemplo deberá actualizar:

router.redirect({
'/tos': '/terms-of-service'
})

a una definición como la siguiente, en la configuración de las rutas:

{
path: '/tos',
redirect: '/terms-of-service'
}

Ruta de actualización

Ejecute el asistente de migración en su código base para encontrar ejemplos de llamadas a router.redirect.

router.alias reemplazado

Esta es ahora una opción en la definición de la ruta a la cual desaría hacerle un alias. Por ejemplo, debería actualizar:

router.alias({
'/manage': '/admin'
})

a una definición como la que se muestra a continuación en su configuración de rutas:

{
path: '/admin',
component: AdminPanel,
alias: '/manage'
}

Si necesita varios alias, también puede usar una sintaxis de arreglo:

alias: ['/manage', '/administer', '/administrate']

Ruta de actualización

Ejecute el asistente de migración en su código base para encontrar ejemplos de llamadas a router.alias.

Propiedades arbitrarias de ruta reemplazado

Las propiedades de ruta arbitrarias ahora deben tener un alcance bajo la nueva propiedad meta, para evitar conflictos con características futuras. Así por ejemplo, si usted ha definido:

'/admin': {
component: AdminPanel,
requiresAuth: true
}

Deberá actualizarlo a:

{
path: '/admin',
component: AdminPanel,
meta: {
requiresAuth: true
}
}

Luego, cuando más tarde acceda a esta propiedad en una ruta, todavía pasará por meta. Por ejemplo:

if (route.meta.requiresAuth) {
// ...
}

Ruta de actualización

Ejecute el asistente de migración en su código base para encontrar ejemplos de propiedades de ruta arbitrarias no incluidas en el metadatos.

[] Sintaxis para arreglos en consultas removido

Cuando se pasan arreglos como parámetros de consultas, la sintaxis QueryString ya no es /foo?users[]=Tom&users[]=Jerry, en cambio, la nueva sintaxis es /foo?users=Tom&users=Jerry. Internamente, $route.query.users seguirá siendo un arreglo, pero si solo hay un parámetro en la consulta:/foo?users=Tom, al acceder directamente a esta ruta, no hay forma de que el router sepa si esperábamos que los ‘usuarios’ fueran un arreglo. Debido a esto, considere agregar una propiedad computada y reemplazar cada referencia de $ route.query.users con ella:

export default {
// ...
computed: {
// los usuarios siempre serán un arreglo
users () {
const users = this.$route.query.users
return Array.isArray(users) ? users : [users]
}
}
}

Comparación/coincidencia de Ruta

La comparación/coincidencia de ruta ahora usa path-to-regexp debajo del capó, lo que lo hace mucho más flexible que antes.

Uno o más parámetros con nombre cambió

La sintaxis ha cambiado ligeramente, por ejemplo /category/*tags, deben actualizarse a /category/:tags+.

Ruta de actualización

Ejecute el asistente de migración en su código base para encontrar ejemplos de sintaxis de rutas obsoletas.

La directiva v-link ha sido reemplazada por un nuevo componente <router-link>, como este tipo de trabajo ahora es responsabilidad exclusiva de los componentes en Vue 2. Eso significa que siempre que tenga un enlace como este:

<a v-link="'/about'">Acerca de</a>

Tendrá que actualizarlo así:

<router-link to="/about">Acerca de</router-link>

Tenga en cuenta que target ="_blank" no es compatible con <router-link>, así que si necesita abrir un enlace en una nueva pestaña, debe usar <a> en su lugar.

Ruta de actualización

Ejecute el asistente de migración en su código base para encontrar ejemplos de la directiva v-link.

La directiva v-link-active también ha sido reemplazada por el atributotag en el componente <router-link>. Entonces por ejemplo, usted necesitará actualizar:

<li v-link-active>
<a v-link="'/about'">Acerca de</a>
</li>

a:

<router-link tag="li" to="/about">
<a>Acerca de</a>
</router-link>

El <a> será el enlace real (y obtendrá el href correcto), pero la clase activa se aplicará al <li> externo.

Ruta de actualización

Ejecute el asistente de migración en su código base para encontrar ejemplos de la directiva v-link-active.

router.go cambió

Por consistencia con la API History de HTML5, router.go ahora es solamente usado por navegación hacia atrás/adelante, mientras que router.push es usado para navegar a una página específica.

Ruta de actualización

Ejecute el asistente de migración en su código base para encontrar ejemplos de router.go siendo usado donde router.push debería ser utilizado.

Opciones de las Rutas: modos

hashbang: false removido

Los Hashbangs ya no son necesario para que Google rastree una URL, por lo que ya no es el valor predeterminado (o incluso una opción) para la estrategia de hash.

Ruta de actualización

Ejecute el asistente de migración en su código base para encontrar ejemplos de la opción hashbang: false.

history: true reemplazado

Todas las opciones de modo de enrutamiento se han condensado en una sola opción mode. Actualizar:

var router = new VueRouter({
history: 'true'
})

a:

var router = new VueRouter({
mode: 'history'
})

Ruta de actualización

Ejecute el asistente de migración en su código base para encontrar ejemplos de la opción history: true.

abstract: true reemplazado

Todas las opciones de modo de enrutamiento se han condensado en una sola opción mode. Actualizar:

var router = new VueRouter({
abstract: 'true'
})

a:

var router = new VueRouter({
mode: 'abstract'
})

Ruta de actualización

Ejecute el asistente de migración en su código base para encontrar ejemplos de la opción abstract: true.

Opciones de las Rutas: Misceláneo

saveScrollPosition reemplazado

Esto ha sido reemplazado por la opción scrollBehavior que acepta una función, por lo que el comportamiento de scroll es completamente personalizable, incluso por ruta. Esto abre muchas nuevas posibilidades, pero para replicar el antiguo comportamiento de:

saveScrollPosition: true

Usted puede sustituirlo por:

scrollBehavior: function (to, from, savedPosition) {
return savedPosition || { x: 0, y: 0 }
}

Ruta de actualización

Ejecute el asistente de migración en su código base para encontrar ejemplos de la opción saveScrollPosition: true.

root renombrado

Renombrado a base por consistencia con el elemento HTML <base>.

Ruta de actualización

Ejecute el asistente de migración en su código base para encontrar ejemplos de la opción root.

transitionOnLoad removido

Esta opción ya no es necesaria ahora que el sistema de transición de Vue tiene explícito `appear’ control de transición.

Ruta de actualización

Ejecute el asistente de migración en su código base para encontrar ejemplos de la opción transitionOnLoad: true.

suppressTransitionError removido

Eliminado debido a la simplificación de los hooks. Si realmente debe suprimir los errores de transición, puede utilizar trycatch en su lugar.

Ruta de actualización

Ejecute el asistente de migración en su código base para encontrar ejemplos de la opción suppressTransitionError: true.

Hooks de la Ruta

activate reemplazado

Use beforeRouteEnter en el componente en su lugar.

Ruta de actualización

Ejecute el asistente de migración en su código base para encontrar ejemplos del hook beforeRouteEnter.

canActivate reemplazado

Use beforeEnter en la ruta en su lugar.

Ruta de actualización

Ejecute el asistente de migración en su código base para encontrar ejemplos del hook canActivate.

deactivate removido

Use los hooks beforeDestroy o destroyed en su lugar.

Ruta de actualización

Ejecute el asistente de migración en su código base para encontrar ejemplos del hook deactivate.

canDeactivate reemplazado

Use beforeRouteLeave en el componente en su lugar.

Ruta de actualización

Ejecute el asistente de migración en su código base para encontrar ejemplos del hook canDeactivate.

canReuse: false removido

Ya no hay un caso de uso para esto en el nuevo Vue Router.

Ruta de actualización

Ejecute el asistente de migración en su código base para encontrar ejemplos de la opcióncanReuse: false.

data reemplazado

La propiedad $route ahora es reactiva, por lo que usted puede usar un watcher para reaccionar a los cambios de ruta, como esto:

watch: {
'$route': 'fetchData'
},
methods: {
fetchData: function () {
// ...
}
}

Ruta de actualización

Ejecute el asistente de migración en su código base para encontrar ejemplos del hook data.

$loadingRouteData removido

Defina su propia propiedad (por ejemplo, isLoading), luego actualice el estado de carga en un watcher en la ruta. Por ejemplo, si va a buscar datos con axios:

data: function () {
return {
posts: [],
isLoading: false,
fetchError: null
}
},
watch: {
'$route': function () {
var self = this
self.isLoading = true
self.fetchData().then(function () {
self.isLoading = false
})
}
},
methods: {
fetchData: function () {
var self = this
return axios.get('/api/posts')
.then(function (response) {
self.posts = response.data.posts
})
.catch(function (error) {
self.fetchError = error
})
}
}

Ruta de actualización

Ejecute el asistente de migración en su código base para encontrar ejemplos de la propiedad metadatos $loadingRouteData.