Миграция с Vue Router 0.7.x

Только Vue Router 2 совместим с Vue 2, поэтому, если вы обновляете Vue, вы должны также обновить и Vue Router. Поэтому мы включили описание процесса миграции в основную документацию. Для подробной инструкции по использованию новой версии Vue Router, обратитесь к документации Vue Router.

Инициализация роутера

`router.start` ^{заменено}

Более нет никакого специального API для инициализации приложения, с использованием Vue Router. Это означает, что вместо:

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

вы должны передать роутер как свойство в экземпляр Vue:

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

или, если вы используете runtime-сборку Vue:

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

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти вызовы router.start.

Объявление путей

`router.map` ^{заменено}

Теперь пути объявляются как массив в свойстве routes при установке роутера. Например, эти пути:

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

будут объявлены как:

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

Синтаксис массива позволяет сделать согласование путей более предсказуемым, так как итерация по объекту не гарантирует использование одинакового порядка ключей во всех браузерах.

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти вызовы router.map.

`router.on` ^{удалено}

Если вам нужно программно генерировать пути при запуске приложения, вы можете сделать это, динамически добавляя определения путей в массив. Например:

// Базовый массив путей
var routes = [
  // ...
]
// Динамически генерируемые пути
marketingPages.forEach(function (page) {
  routes.push({
    path: '/marketing/' + page.slug
    component: {
      extends: MarketingComponent
      data: function () {
        return { page: page }
      }
    }
  })
})
var router = new Router({
  routes: routes
})

Если вам нужно добавить новые пути после того, как был создан экземпляр роутера, вы можете заменить свойство match новым, включающим в себя путь, который вы хотите добавить:

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

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти вызовы router.on.

`router.beforeEach` ^{изменён}

router.beforeEach теперь работает асинхронно и принимает функцию next третьим аргументом.

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` ^{переименовано}

Переименовано в children для соответствия Vue другим библиотекам маршрутизации.

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти использование свойства subRoutes.

`router.redirect` ^{заменено}

Теперь это опция при объявлении роутера. Например, вам нужно заменить:

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

в вашей конфигурации routes на объявление, показанное ниже:

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

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти вызовы router.redirect.

`router.alias` ^{заменено}

Теперь это опция при объявлении роутера, которой вы присваиваете псевдоним. Например, вам нужно заменить:

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

в вашей конфигурации routes на объявление, показанное ниже:

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

Если вам нужно несколько псевдонимов, вы можете также использовать синтаксис массива:

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

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти вызовы router.alias.

Произвольные свойства пути ^{заменено}

Произвольные свойства пути теперь должны быть помещены в новое свойство meta, чтобы избежать конфликтов с будущим функционалом. Например, если вы определили:

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

вы должны заменить это на:

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

Затем, для дальнейшего доступа к этому свойству пути, вы должны пройти через свойство meta, например:

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

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти произвольные свойства пути, не помещенные в свойство `meta`.

Сопоставление путей

Сопоставление путей теперь использует path-to-regexp под капотом, что делает его гораздо более гибким, чем было ранее.

Один или более именованных параметров ^{изменено}

Синтаксис немного изменился, поэтому /category/*tags, например, должно быть заменено на /category/:tags+.

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти использование устаревшего синтаксиса.

Ссылки

`v-link` ^{заменено}

Директива v-link заменена на новый компонент <router-link>, так как за данный тип работ, в Vue 2, теперь отвечают только компоненты. Это означает, что всякий раз, когда у вас есть ссылка, как эта:

<a v-link="'/about'">About</a>

вам необходимо изменить её следующим образом:

<router-link to="/about">About</router-link>

Запомните, что target="_blank" больше не поддреживается в <router-link>, поэтому, если вам нужно открыть ссылку в новой вкладке, вы должны использовать тег <a>.

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти использование директивы v-link.

`v-link-active` ^{заменено}

Директива v-link-active также была заменена на атрибут tag в компоненте <router-link>. Например, вам нужно заменить это:

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

на:

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

Тег <a> будет фактически ссылкой (с правильным атрибутом href), но активный класс будет применен к родительскому тегу <li>.

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти использование директивы v-link-active.

`router.go` ^{изменено}

Для соответствия HTML5 History API, router.go теперь используется только для навигации вперед/назад, в то время как router.push используется для перехода на конкретную страницу.

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти использование router.go вместо необходимого использования router.push.

Опции роутера: режимы

`hashbang: false` ^{удалено}

Символ хэша более не обязателен для паука Google, при сканировании URL, так что они больше не используются по умолчанию (или в качестве опции) для хэш-стратегии.

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти использование опции hashbang: false.

`history: true` ^{заменено}

Все параметры режима роутера были объединены в опцию mode. Обновите:

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

на:

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

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти использование опции history: true.

`abstract: true` ^{заменено}

Все параметры режима роутера были объединены в опцию mode. Обновите:

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

на:

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

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти использование опции abstract: true.

Опции роутера: разное

`saveScrollPosition` ^{заменено}

Было заменено на опцию scrollBehavior которая принимает функцию, поэтому поведение прокрутки стало полностью настраиваемым - даже для каждого пути. Это открывает много новых возможностей, (but to simply replicate the old behavior of)?:

saveScrollPosition: true

Вы можете заменить это на:

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

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти использование опции saveScrollPosition: true.

`root` ^{переименовано}

Переименовано в base для соответствия HTML-эелементу <base>.

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти использование опции root.

`transitionOnLoad` ^{удалено}

В этой опции нет необходимости, теперь, когда Vue имеет явное управление переходами appear.

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти использование опции transitionOnLoad: true.

`suppressTransitionError` ^{удалено}

Удалено из-за упрощения системы хуков. Если вам действительно нужно отловить ошибки переходов, вы можете использовать вместо этого try…catch.

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти использование опции suppressTransitionError: true.

Хуки путей

`activate` ^{заменено}

Вместо этого используйте beforeRouteEnter в компоненте.

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти использование хука beforeRouteEnter.

`canActivate` ^{заменено}

Вместо этого используйте beforeEnter в компоненте.

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти использование хука canActivate.

`deactivate` ^{удалено}

Вместо этого используйте хуки beforeDestroy или destroyed.

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти использование хука deactivate.

`canDeactivate` ^{заменено}

Вместо этого используйт beforeRouteLeave в компоненте.

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти использование хука canDeactivate.

`canReuse: false` ^{удалено}

Более не существует вариантов использования этого в новой версии Vue Router.

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти использование опции canReuse: false.

`data` ^{заменено}

Свойство $route теперь реактивно, поэтому, вы можете просто использовать слежение за изменением пути, например:

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

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти использование хука data.

`$loadingRouteData` ^{удалено}

Определите ваше свойство (например, isLoading), затем обновите состояние загрузки с помощью опции watch на пути. Например, при предварительном получении данных с использованием 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
      })
  }
}

Обновление

Запустите миграционного помощника в вашем проекте, чтобы найти использование свойства $loadingRouteData.

← Миграция с Vue 1.x Миграция с Vuex 0.6.x на 1.0 →

Помощь

Новости

Официальные плагины

Списки ресурсов

Помощь

Новости

Официальные плагины

Списки ресурсов

Guide 2.x 1.0 0.12 0.11

Основы

Переходы & Анимации

Переиспользование & Композиция

Инструментарий

Масштабирование

Продвинутые темы

Вопросы миграции

Мета

Миграция с Vue Router 0.7.x

Инициализация роутера

router.start заменено

Обновление

Объявление путей

router.map заменено

Обновление

router.on удалено

Обновление

router.beforeEach изменён

subRoutes переименовано

Обновление

router.redirect заменено

Обновление

router.alias заменено

Обновление

Произвольные свойства пути заменено

Обновление

Сопоставление путей

Один или более именованных параметров изменено

Обновление

Ссылки

v-link заменено

Обновление

v-link-active заменено

Обновление

Programmatic Navigation

router.go изменено

Обновление

Опции роутера: режимы

hashbang: false удалено

Обновление

history: true заменено

Обновление

abstract: true заменено

Обновление

Опции роутера: разное

saveScrollPosition заменено

Обновление

root переименовано

Обновление

transitionOnLoad удалено

Обновление

suppressTransitionError удалено

Обновление

Хуки путей

activate заменено

Обновление

canActivate заменено

Обновление

deactivate удалено

Обновление

canDeactivate заменено

Обновление

canReuse: false удалено

Обновление

data заменено

Обновление

$loadingRouteData удалено

Обновление

Guide

`router.start` ^{заменено}

`router.map` ^{заменено}

`router.on` ^{удалено}

`router.beforeEach` ^{изменён}

`subRoutes` ^{переименовано}

`router.redirect` ^{заменено}

`router.alias` ^{заменено}

Произвольные свойства пути ^{заменено}

Один или более именованных параметров ^{изменено}

`v-link` ^{заменено}

`v-link-active` ^{заменено}

`router.go` ^{изменено}

`hashbang: false` ^{удалено}

`history: true` ^{заменено}

`abstract: true` ^{заменено}

`saveScrollPosition` ^{заменено}

`root` ^{переименовано}

`transitionOnLoad` ^{удалено}

`suppressTransitionError` ^{удалено}

`activate` ^{заменено}

`canActivate` ^{заменено}

`deactivate` ^{удалено}

`canDeactivate` ^{заменено}

`canReuse: false` ^{удалено}

`data` ^{заменено}

`$loadingRouteData` ^{удалено}