10 vuejs interview questions about routing vue-router (including answer analysis)

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.

Routing vue-router interview questions

1. What is the mvvm framework?

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)

2. What is vue-router? What are the components?

• Vue Router is the official routing manager for Vue.js. It is deeply integrated with the core of Vue.js, making it easy to build single-page applications.
• b988a8fd72e5e0e42afffd18f951b277 and 975b587bf85a482ea10b0a28848e78a4 and 7c9485ff8c3cba5ae9343ed63c2dc3f7

3. Active-class is an attribute of which component?

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

4 . How to define dynamic routing of vue-router? How to get the passed value?

• The creation of dynamic routes mainly involves using the path attribute. Dynamic path parameters are used, starting with a colon, as follows:

{
  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.

• When matching the route under /details, the parameter value will be set to this.$route.params, so dynamic parameters can be obtained through this attribute

console.log(this.$route.params.id)

5. What kinds of navigation hooks does vue-router have?

• Global front guard

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

  • next(): Enter the next hook in the pipeline. If all hooks are executed, the navigation status is confirmed (confirmed)
  • next(false): The current navigation of the terminal. If the browser URL changes, the URL will be recharged to the address corresponding to the from route.
  • next(’/’)||next({path:’/’}): Jump to a different address. Current navigation terminal, perform new navigation.

* The next method must be called, otherwise the hook function cannot be resolved

• Global post-hook

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

  • beforEnter

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home，
      beforeEnter: (to, from, next) = {
        // to do somethings
        // 参数与全局守卫参数一样
    	}
    }
  ]
})

• Intra-component navigation hook

const Home = {
  template: `<div</div`,
  beforeRouteEnter(to, from, next){
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不能获取组件实例 ‘this’，因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next){
    // 在当前路由改变，但是该组件被复用时调用
    // 例：对于一个动态参数的路径 /home/:id,在/home/1 和 /home/2 之间跳转的时候
    // 由于会渲染同样的 Home 组件，因此组件实例会被复用，而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 &#39;this&#39;
  },
  beforeRouteLeave(to, from, next){
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 &#39;this&#39;
  }
}

• beforeRouterEnter cannot access this because the guard is called before the navigation is confirmed, so the new component has not yet been created. You can access the component instance by passing a callback to next. Execute the callback when the navigation is confirmed, and use the instance as the method parameter of the callback.

const Home = {
  template: `<div</div`,
  beforeRouteEnter(to, from, next){
    next( vm = {
      // 通过 &#39;vm&#39; 访问组件实例
    })
  }
}

6. What is the difference between $route and $router?

• router is an instance of VueRouter. It is a global routing object that includes routing jump methods, hook functions, etc.
• route is a routing information object||jump routing object. Each route will have a route object, which is a local object and contains routing information such as path, params, hash, query, fullPath, matched, name, etc. parameter.

7. vue-router responds to changes in routing parameters

• Use watch to detect

// 监听当前路由发生变化的时候执行
watch: {
  $route(to, from){
    console.log(to.path)
    // 对路由变化做出响应
  }
}

• Navigation hook function within the component

beforeRouteUpdate(to, from, next){
  // to do somethings
}

8. vue-router passing parameters

• Params
  • Only name can be used, not Using the path
  • parameter will not be displayed on the path
  • The browser force refresh parameter will be cleared,

  // 传递参数
  this.$router.push({
    name: Home，
    params: {
    	number: 1 ,
    	code: '999'
  	}
  })
  // 接收参数
  const p = this.$route.params

• Query:

  • The parameters will be displayed on the path and the refresh will not be cleared
  • name can use the path path

// 传递参数
this.$router.push({
  name: Home，
  query: {
  number: 1 ,
  code: '999'
}
                  })
// 接收参数
const q = this.$route.query

9. Two modes of vue-router

• hash

  • The principle is the onhashchage event, which can be monitored on the window object This event

window.onhashchange = function(event){
  console.log(event.oldURL, event.newURL)
  let hash = location.hash.slice(1)
}

• history

  • 利用了HTML5 History Interface 中新增的pushState()和replaceState()方法。
  • 需要后台配置支持。如果刷新时，服务器没有响应响应的资源，会刷出404，

10. vue-router实现路由懒加载（动态加载路由）

• 把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应的组件即为路由的懒加载，可以加快项目的加载速度，提高效率

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!