Руководство

Миграция с 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 заменена на новый компонент <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 также была заменена на атрибут 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 в компоненте.

Обновление

Запустите миграционный помощник в вашем проекте, чтобы найти использование хука 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 →
Обнаружили ошибку или хотите добавить что-то своё в документацию? Отредактируйте эту страницу на GitHub!