Миграция с Vue Router 0.7.x
Единственный Vue Router, совместимый с Vue 2, - это Vue Router 2, поэтому не забывайте, что если вы обновляете Vue, вам также придется обновить 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>'
})Или, если вы используете сборку Vue только для времени выполнения:
new Vue({
el: '#app',
router: router,
render: h => h('router-view')
})Путь обновления
Чтобы найти примеры вызова router.start, запустите помощник по миграции на вашей базе кода.
Определения маршрутов
заменен router.map
Теперь мы определяем маршруты как массив в опции маршрутов при создании экземпляра маршрутизатора. Итак, маршруты ниже, например:
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 удален
Если вам нужно сгенерировать маршруты программно при запуске приложения, вы можете сделать это, динамически передавая определения в массив маршрутов. Например:
// your normal base routes
var routes = [
// ...
]```
```// Dynamically generated 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
})Если вам нужно добавить новые маршруты после создания экземпляра маршрутизатора, вы можете заменить средство сопоставления маршрутизатора новым, включающим в себя маршрут, который вы хотите добавить:
router.match = createMatcher(
[{
path: '/my/new/path',
component: MyComponent
}].concat(router.options.routes)
)Путь обновления
Чтобы найти примеры вызываемого router.on, запустите помощник по миграции на вашей базе кода.
router.beforeEach изменилось
Router.beforeEach теперь работает асинхронно и принимает следующую функцию в качестве третьего аргумента.
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 переименован
SubRoutes был переименован в дочерние для согласованности в Vue и с другими библиотеками маршрутизации.
Путь обновления
Чтобы найти примеры опции subRoutes, запустите помощник по миграции на вашей кодовой базе.
заменен router.redirect
Router.redirect теперь является опцией в определениях маршрутов. Так, например, вам придется обновить:
router.redirect({
'/tos': '/terms-of-service'
})к определению как ниже в вашей конфигурации маршрутов:
{
path: '/tos',
redirect: '/terms-of-service'
}Путь обновления
Чтобы найти примеры вызова router.redirect, запустите помощник по миграции на вашей кодовой базе.
заменен router.alias
Router.alias теперь является опцией в определении маршрута, к которому вы хотите добавить псевдоним. Так, например, вам придется обновить:
router.alias({
'/manage': '/admin'
})к определению, подобному приведенному ниже в конфигурации ваших маршрутов:
{
path: '/admin',
component: AdminPanel,
alias: '/manage'
}В случаях, когда вам нужно несколько псевдонимов, вы также можете использовать синтаксис массива:
alias: ['/manage', '/administer', '/administrate']Путь обновления
Чтобы найти примеры вызова router.alias, запустите помощник по миграции на вашей кодовой базе.
Произвольные свойства маршрута заменены
Свойства произвольного маршрута теперь должны быть ограничены новым мета-свойством, чтобы избежать конфликтов с будущими функциями. Так, например, если вы ранее определили:
'/admin': {
component: AdminPanel,
requiresAuth: true
}Тогда вам бы пришлось обновить его до:
{
path: '/admin',
component: AdminPanel,
meta: {
requiresAuth: true
}
}Тогда при доступе к этому свойству на маршруте позже вам все равно придется пройти через мета. Например:
if (route.meta.requiresAuth) {
// ...
}Путь обновления
Чтобы найти примеры произвольных свойств маршрута, не относящихся к области мета, запустите помощник по миграции на вашей кодовой базе.
[] Синтаксис для массивов в запросах удален
При передаче массивов в параметры запроса синтаксис QueryString больше не является / foo? Users [] = Tom & users [] = Jerry, вместо этого используется новый синтаксис / foo? Users = Tom & users = Jerry. Внутренне, $ route.query.users по-прежнему будет массивом, однако, если в запросе есть только один параметр: / foo? Users = Tom, когда мы напрямую обращаемся к этому маршруту, у маршрутизатора нет возможности знать, если мы ожидаем, что пользователи будут массивом. В связи с этим вам следует рассмотреть возможность добавления вычисляемого свойства, а затем заменить на него все ссылки на $ route.query.users:
export default {
// ...
computed: {
// users will always be an array
users () {
const users = this.$route.query.users
return Array.isArray(users) ? users : [users]
}
}
}Маршрут соответствия
При сопоставлении маршрутов теперь будет использоваться path-to-regexp, что делает его гораздо более гибким, чем раньше.
Один или несколько именованных параметров изменены
Синтаксис был немного изменен, поэтому теги / category / *, например, будут обновлены на / 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 изменился
Для соответствия API истории HTML5 router.go теперь используется только для навигации назад / вперед, а router.push используется для перехода на определенную страницу.
Путь обновления
Чтобы найти примеры использования router.go, где вместо него должен использоваться router.push, запустите помощник по миграции.
Параметры маршрутизатора: режимы
hashbang: ложь удалена
Хэш-бангам больше не требуется, чтобы Google сканировал URL-адрес, поэтому они больше не используются по умолчанию (или даже не являются опцией) для стратегии хеширования.
Путь обновления
Чтобы найти примеры опции hashbang: false, запустите помощник по миграции на вашей кодовой базе.
история: правда заменила
Все параметры режима маршрутизации сведены в один режим. Обновить:
var router = new VueRouter({
history: 'true'
})чтобы:
var router = new VueRouter({
mode: 'history'
})Путь обновления
Чтобы найти примеры опции history: true, запустите помощник по миграции на своей базе кода.
аннотация: правда заменена
Все параметры режима маршрутизации сведены в один режим. Обновить:
var router = new VueRouter({
abstract: 'true'
})чтобы:
var router = new VueRouter({
mode: 'abstract'
})Путь обновления
Чтобы найти примеры опции abstract: true, запустите помощник по миграции на своей базе кода.
Варианты маршрута: Разное
saveScrollPosition заменен
SaveScrollPosition был заменен параметром scrollBehavior, который принимает функцию, так что поведение прокрутки полностью настраивается - даже для маршрута. Это откроет много новых возможностей, но повторить старое поведение:
saveScrollPosition: true
Вы можете заменить его на:
scrollBehavior: function (to, from, savedPosition) {
return savedPosition || { x: 0, y: 0 }
}Путь обновления
Чтобы найти примеры опции saveScrollPosition: true, запустите помощник по миграции на базе кода.
корень переименован
Это было переименовано в base для согласованности с элементом HTML <base>.
Путь обновления
Чтобы найти примеры корневого параметра, запустите помощник по миграции.
transitionOnLoad удален
Эта опция больше не нужна теперь, когда система перехода Vue имеет явный контроль перехода.
Путь обновления
Чтобы найти примеры опции transitionOnLoad: true, запустите помощник по миграции на своей кодовой базе.
suppressTransitionError удален
Ошибка suppressTransitionError была удалена из-за упрощения хуков. Если вам действительно нужно подавить эти ошибки перехода, вы можете использовать try? Catch, если хотите.
Путь обновления
Чтобы найти примеры опции suppressTransitionError: true, запустите помощник по миграции на своей кодовой базе.
Маршрут Крючки
активировать заменил
Вместо этого вы должны использовать beforeRouteEnter в компоненте.
Путь обновления
Чтобы найти примеры ловушки активации, запустите помощник по миграции на вашей кодовой базе.
можно активировать заменил
вместо этого вы должны использовать beforeEnter в маршруте.
Путь обновления
Чтобы найти примеры ловушки canActivate, запустите помощник по миграции на вашей кодовой базе.
деактивировать удалено
Вместо этого вы должны использовать компоненты beforeDestroy или уничтоженные хуки.
Путь обновления
Чтобы найти примеры крюка деактивации, запустите помощник по миграции.
можно отключить заменить
Вы должны использовать beforeRouteLeave в компоненте вместо этого.
Путь обновления
Чтобы найти примеры ловушки canDeactivate, запустите помощник по миграции на своей кодовой базе.
canReuse: false удалено
Больше нет варианта использования этого в новом Vue Router.
Путь обновления
Чтобы найти примеры опции canReuse: false, запустите помощник по миграции на базе кода.
данные заменены
Свойство $ route теперь реагирует, поэтому вы можете использовать наблюдателя для реагирования на изменения маршрута, например:
watch: {
'$route': 'fetchData'
},
methods: {
fetchData: function () {
// ...
}
}Путь обновления
Чтобы найти примеры перехвата данных, запустите помощник по миграции на вашей кодовой базе.
$ loadingRouteData удалено
Вы должны определить свое собственное свойство (например, isLoading), затем вы обновите состояние загрузки в наблюдателе на маршруте. Например, если вы выбираете данные с помощью 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, запустите миграцию на базе кода.
Новый контент: Composer: менеджер зависимостей для PHP , R программирования