Что такое VueJS? Каковы основные особенности VueJS? 6

43. Что такое динамическое сопоставление маршрутов?

Иногда может потребоваться сопоставить маршруты с одним и тем же компонентом на основе шаблона.
Возьмем пользовательский компонент с сопоставленными URL-адресами, например / user / john / post / 123 и / user / jack / post / 235, с использованием динамических сегментов,
const User = {
template: '

User {{ $route.params.name }}, PostId: {{ route.params.postid }}

'
}

const router = new VueRouter({

routes: [
// динамические сегменты начинаются с двоеточия
{ path: '/user/:name/post/:postid', component: User }
]
})

44. Как сделать изменения параметров маршрутизатора реактивными?

Когда вы переходите с одного URL-адреса на другой (сопоставленный с одним компонентом) с использованием маршрутов с параметрами, то один и тот же экземпляр компонента будет использоваться повторно. Несмотря на то, что это более эффективно, чем уничтожение старого экземпляра и последующее создание нового, хуки жизненного цикла компонента не будут вызываться.
Эта проблема может быть решена с использованием любого из следующих подходов:
i. Посмотрите на объект $ route:

const User = {

template: '

User {{ $route.params.name }}

',
watch: {
'$route' (to, from) {
//реагировать на изменение маршрута ...
}
}
}

ii. Использовать навигационную защиту beforeRouteUpdate: доступно только с версии 2.2.

const User = {

template: '

User {{ $route.params.name }}

',
beforeRouteUpdate (to, from, next) {
// реагировать на изменения маршрута и затем вызывать next ()
}
}
Обратите внимание, что защита beforeRouteEnter НЕ имеет к этому доступа. Вместо этого вы можете передать обратный вызов next для доступа к экземпляру vm.

45. Что такое приоритет сопоставления маршрута?

Иногда URL-адрес может совпадать по нескольким маршрутам, и путаница с тем, какой маршрут нужно сопоставить, решается путем определения приоритета сопоставления маршрутов. Приоритет зависит от порядка настройки маршрутов. то есть маршрут, объявленный первым, имеет более высокий приоритет.
const router = new VueRouter({
routes: [
// динамические сегменты начинаются с двоеточия
{ path: '/user/:name', component: User } //Этот маршрут получает более высокий приоритет
{ path: '/user/:name', component: Admin }
{ path: '/user/:name', component: Customer }
]
})