This article will introduce you to 10 vuejs interview questions about routing vue-router. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
mvvm is Model-View-ViewModel. The design principle of mvvm is based on mvc.
MVVM is the abbreviation of Model-View-ViewModel. Model represents the data model and is responsible for business logic and data. Encapsulation, View represents the UI component responsible for interface and display, ViewModel monitors changes in model data and controls view behavior, handles user interaction, and simply connects the View layer and the Model layer through two-way data binding. Under the MVVM architecture, View and Model are not directly connected, but interact through ViewModel. We only focus on business logic and do not need to manually operate the DOM, nor do we need to pay attention to the synchronization of View and Model. (Learning video sharing: vue video tutorial)
<router-link> and <router-view> and <keep-alive>
active-class is the router-link terminal attribute, used to switch the selected style. This style will be applied when the router-link label is clicked
{
path: '/details/:id'
name: 'Details'
components: Details
}Access to the details directory All files, such as details/a, details/b, etc., will be mapped to the Details component.
console.log(this.$route.params.id)
const router = new VueRouter({})
router.beforeEach((to, from, next) = {
// to do somethings
})to:Route, represents the target to enter, it is a routing object.
from:Route, represents the route that is currently leaving, and is also a routing object
next:Function, a method that must be called, The specific execution effect depends on the parameters called by the next method
router.afterEach((to, from) = {
// to do somethings
})The post hook does not have a next function, nor does it change the navigation itself.
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)
// 对路由变化做出响应
}
}beforeRouteUpdate(to, from, next){
// to do somethings
} // 传递参数
this.$router.push({
name: Home，
params: {
number: 1 ,
code: '999'
}
})
// 接收参数
const p = this.$route.paramsQuery:
// 传递参数
this.$router.push({
name: Home，
query: {
number: 1 ,
code: '999'
}
})
// 接收参数
const q = this.$route.queryhash
window.onhashchange = function(event){
console.log(event.oldURL, event.newURL)
let hash = location.hash.slice(1)
}history
const router = new VueRouter({
routes: [
{
path: '/home',
name: 'Home'，
component:() = import('../views/home')
}
]
})更多编程相关知识，请访问：编程视频！！
The above is the detailed content of 10 vuejs interview questions about routing vue-router (including answer analysis). For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
