Миграция с 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'">О нас</a>

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

<router-link to="/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'">О нас</a>
</li>

на:

<router-link tag="li" to="/about">
  <a>О нас</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 которая принимает функцию, поэтому поведение прокрутки стало полностью настраиваемым - даже для каждого пути. Это открывает много новых возможностей, но для возврата старого поведения:

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 в компоненте.

Обновление

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

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

Руководство 3.x 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 заменено

Обновление

Программная навигация

router.go изменено

Обновление

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

hashbang: false удалено

Обновление

history: true заменено

Обновление

abstract: true заменено

Обновление

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

saveScrollPosition заменено

Обновление

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

Обновление

transitionOnLoad удалено

Обновление

suppressTransitionError удалено

Обновление

Хуки путей

activate заменено

Обновление

canActivate заменено

Обновление

deactivate удалено

Обновление

canDeactivate заменено

Обновление

canReuse: false удалено

Обновление

data заменено

Обновление

$loadingRouteData удалено

Обновление

Руководство

`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` ^{удалено}