Руководство
Основы
- Установка
- Введение
- Экземпляр Vue
- Синтаксис шаблонов
- Вычисляемые свойства и слежение
- Работа с классами и стилями
- Условная отрисовка
- Отрисовка списков
- Обработка событий
- Работа с формами
- Основы компонентов
Продвинутые компоненты
- Регистрация компонентов
- Входные параметры
- Пользовательские события
- Слоты
- Динамические и асинхронные компоненты
- Обработка крайних случаев
Переходы и анимации
- Анимирование списков и появления/исчезновения
- Анимирование переходов между состояниями
Переиспользование и композиция
- Примеси
- Пользовательские директивы
- Render-функции и JSX
- Плагины
- Фильтры
Инструментарий
- Однофайловые компоненты
- Тестирование
- Поддержка TypeScript
- Публикация на production
Масштабирование
- Роутинг
- Управление состоянием приложения
- SSR. Отрисовка на стороне сервера
- Безопасность
Продвинутые темы
- Подробно о реактивности
Вопросы миграции
- Миграция с Vue 1.x
- Миграция с Vue Router 0.7.x
- Миграция с Vuex 0.6.x на 1.0
Мета
- Сравнение с другими фреймворками
- Присоединяйтесь к сообществу Vue.js!
- Познакомьтесь с командой
Эта документация для версий v2.x и ранее. Для v3.x, документация здесь.
Миграция с 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
.