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')
})

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.

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

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.

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

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

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) {
  // ...
}

[] 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+.

Links

v-link ^reemplazado

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.

v-link-active ^reemplazado

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.

Navegación Programática

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.

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.

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'
})

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'
})

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

root ^renombrado

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

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.

suppressTransitionError ^removido

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

Hooks de la Ruta

activate ^reemplazado

Use beforeRouteEnter en el componente en su lugar.

canActivate ^reemplazado

Use beforeEnter en la ruta en su lugar.

deactivate ^removido

Use los hooks beforeDestroy o destroyed en su lugar.

canDeactivate ^reemplazado

Use beforeRouteLeave en el componente en su lugar.

canReuse: false ^removido

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

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 () {
    // ...
  }
}

$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
      })
  }
}