2. Вопросы для собеседования по маршрутизации Vue
1. Что такое структура mvvm?
mvvm — это Model-View-ViewModel, принцип проектирования mvvm основан на mvc.
MVVM — это сокращение от Model-View-ViewModel. Модель представляет модель данных и отвечает за бизнес-логику и инкапсуляцию данных. Представление представляет компонент пользовательского интерфейса, отвечающий за интерфейс и отображение. ViewModel отслеживает изменения в данных модели и управляет поведением представления, а также обрабатывает взаимодействие с пользователем. Двусторонняя привязка данных соединяет слой представления со слоем модели. В архитектуре MVVM View и Model не связаны напрямую, а взаимодействуют через ViewModel.Мы ориентируемся только на бизнес-логику, не нужно вручную манипулировать DOM и не нужно обращать внимание на синхронизацию между Вид и модель.
2. Что такое vue-маршрутизатор? Что такое компоненты?
- Vue-маршрутизаторVue.jsОфициальный менеджер маршрута. Он глубоко интегрирован с ядром Vue.js, что упрощает создание одностраничных приложений.
-
<router-link>и<router-view>и<keep-alive>
3. Свойством какого компонента является активный класс?
active-class – это атрибут терминала router-link, который используется для переключения выбранного стиля. Этот стиль будет применяться при нажатии на метку router-link.
4. Как определить динамическую маршрутизацию vue-router? Как получить переданное значение?
- Создание динамических маршрутов в основном заключается в использовании параметров динамического пути в процессе использования атрибута пути, начиная с двоеточия, следующим образом:
{
path: '/details/:id'
name: 'Details'
components: Details
}
Доступ ко всем файлам в каталоге сведений, если сведения/а, сведения/б и т. д. будут сопоставлены с компонентом сведений.
- При сопоставлении маршрута в /details значение параметра будет установлено в this.$route.params, поэтому через это свойство можно получить динамические параметры.
console.log(this.$route.params.id)
5. Какие навигационные крючки есть у vue-router?
- Глобальная передняя защита
const router = new VueRouter({})
router.beforeEach((to, from, next) = {
// to do somethings
})
-
to:Route, представляет цель для входа, это объект маршрута.
-
from:Route, представляет маршрут, который в данный момент уходит, а также является объектом маршрута.
-
next:Function, метод, который необходимо вызвать, конкретный эффект выполнения зависит от параметров следующего вызова метода
- next(): введите следующий хук в конвейере.Если все хуки выполнены, статус навигации подтвержден (подтвержден)
- next(false): Текущая навигация терминала. Если URL-адрес браузера изменится, URL-адрес будет перезаряжен на адрес, соответствующий исходному маршруту.
- next('/')||next({path:'/'}): Перейти к другому адресу. Текущий навигационный терминал выполняет новую навигацию.
* Следующий метод должен быть вызван, иначе функция ловушки не может быть разрешена
- глобальный почтовый хук
router.afterEach((to, from) = {
// to do somethings
})
-
Хук сообщения не имеет следующей функции и не меняет саму навигацию.
-
Эксклюзивный хук маршрутизации
- beforEnter
const router = new VueRouter({
routes: [
{
path: '/home',
component: Home，
beforeEnter: (to, from, next) = {
// to do somethings
// 参数与全局守卫参数一样
}
}
]
})
- Внутрикомпонентные навигационные хуки
const Home = {
template: `<div></div>`,
beforeRouteEnter(to, from, next){
// 在渲染该组件的对应路由被 confirm 前调用
// 不能获取组件实例 ‘this’，因为当守卫执行前，组件实例还没被创建
},
beforeRouteUpdate(to, from, next){
// 在当前路由改变，但是该组件被复用时调用
// 例：对于一个动态参数的路径 /home/:id,在/home/1 和 /home/2 之间跳转的时候
// 由于会渲染同样的 Home 组件，因此组件实例会被复用，而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 'this'
},
beforeRouteLeave(to, from, next){
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 'this'
}
}
- beforeRouterEnter не может получить к этому доступ, потому что защита вызывается до подтверждения навигации, поэтому новый компонент не был создан, вы можете получить доступ к экземпляру компонента, передав обратный вызов next. Выполните обратный вызов, когда навигация будет подтверждена, и передайте экземпляр в качестве параметра метода обратного вызова.
const Home = {
template: `<div></div>`,
beforeRouteEnter(to, from, next){
next( vm = {
// 通过 'vm' 访问组件实例
})
}
}
6. В чем разница между $route и $router?
- router — это экземпляр VueRouter, который является глобальным объектом маршрутизации, включая методы перехода маршрутизации, функции ловушек и т. д.
- route — это объект информации о маршрутизации||объект маршрутизации перехода, каждый маршрут будет иметь объект маршрута, который является локальным объектом, включая путь, параметры, хэш, запрос, полный путь, сопоставление, имя и другие параметры информации о маршрутизации.
7. vue-router реагирует на изменение параметров маршрутизации
- Обнаружение с часами
// 监听当前路由发生变化的时候执行
watch: {
$route(to, from){
console.log(to.path)
// 对路由变化做出响应
}
}
- Встроенная функция навигационного хука
beforeRouteUpdate(to, from, next){
// to do somethings
}
8. параметры vue-маршрутизатора
- Params
- Можно использовать только имя, нельзя использовать путь
- Параметры не отображаются на пути
- Параметры принудительного обновления браузера будут очищены,
// 传递参数
this.$router.push({
name: Home，
params: {
number: 1 ,
code: '999'
}
})
// 接收参数
const p = this.$route.params
-
Query:
- Параметры будут отображаться на пути, обновление не будет очищено
- имя может использовать путь путь
// 传递参数
this.$router.push({
name: Home，
query: {
number: 1 ,
code: '999'
}
})
// 接收参数
const q = this.$route.query
9. Два режима vue-router
-
hash
- Принцип - событие onhashchage, которое можно отслеживать на объекте окна
window.onhashchange = function(event){
console.log(event.oldURL, event.newURL)
let hash = location.hash.slice(1)
}
-
history
- Воспользуйтесь преимуществами новых методов pushState() и replaceState() в интерфейсе истории HTML5.
- Требуется поддержка фоновой конфигурации. Если сервер не отвечает на ресурс при обновлении, будет отображаться ошибка 404.
10. vue-router реализует ленивую загрузку маршрутов (динамически загружаемые маршруты)
- Компоненты, соответствующие разным маршрутам, делятся на разные блоки кода, а затем соответствующие компоненты загружаются при доступе к маршруту, что является ленивой загрузкой маршрута, что может ускорить скорость загрузки проекта и повысить эффективность.
const router = new VueRouter({
routes: [
{
path: '/home',
name: 'Home'，
component:() = import('../views/home')
}
]
})