In diesem Artikel werden Ihnen 10 Vuejs-Interviewfragen zum Routing von Vue-Routern vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
mvvm ist Model-View-ViewModel. Das Designprinzip von mvvm basiert auf mvc.
MVVM ist die Abkürzung für Model-View-Model und ist für die Geschäftslogik und Datenkapselung verantwortlich stellt die UI-Komponente dar und ist für die Schnittstelle und Anzeige verantwortlich. ViewModel überwacht Änderungen in Modelldaten, steuert das Ansichtsverhalten und verarbeitet Benutzerinteraktionen. Einfach ausgedrückt verbindet es die Ansichtsebene und die Modellebene durch bidirektionale Datenbindung. Unter der MVVM-Architektur sind Ansicht und Modell nicht direkt miteinander verbunden, sondern interagieren über ViewModel. Wir konzentrieren uns nur auf die Geschäftslogik und müssen das DOM nicht manuell bedienen, noch müssen wir auf die Synchronisierung von Ansicht und Modell achten. (Lernvideo-Sharing: Vue-Video-Tutorial)
<router-link>和<router-view>和<keep-alive>
active-class ist das Router-Link-Terminalattribut, das zum Wechseln des ausgewählten Stils verwendet wird. Dieser Stil wird angewendet, wenn auf das Router-Link-Label geklickt wird.
{
path: '/details/:id'
name: 'Details'
components: Details
}Greifen Sie auf alle Dateien im Detailverzeichnis zu, wenn Details/a, Details/ b usw. werden der Detailkomponente zugeordnet.
console.log(this.$route.params.id)
const router = new VueRouter({})
router.beforeEach((to, from, next) = {
// to do somethings
})to:Route, stellt das einzugebende Ziel dar, es ist ein Routing-Objekt.
von:Route stellt die Route dar, die gerade abfährt, und ist auch ein Routing-Objekt
next:Funktion, eine Methode, die aufgerufen werden muss, und der spezifische Ausführungseffekt hängt von den Parametern der nächsten Methode ab call
router.afterEach((to, from) = {
// to do somethings
})Der Post-Hook hat keine Next-Funktion und wird es auch nicht tun Ändern Sie die Navigation selbst.
Route Exclusive Hook
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'
}
}const Home = {
template: `<div</div`,
beforeRouteEnter(to, from, next){
next( vm = {
// 通过 'vm' 访问组件实例
})
}
}// 监听当前路由发生变化的时候执行
watch: {
$route(to, from){
console.log(to.path)
// 对路由变化做出响应
}
}const router = new VueRouter({
routes: [
{
path: '/home',
name: 'Home'，
component:() = import('../views/home')
}
]
})更多编程相关知识，请访问：编程视频！！
Das obige ist der detaillierte Inhalt von10 vuejs-Interviewfragen zum Routing vue-router (einschließlich Antwortanalyse). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
