2. Vue routing 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 and is responsible for interface and display. In a nutshell, the View layer is connected to the Model layer through two-way data binding. In MVVM architecture, View and Model do not directly contact, but through the ViewModel interaction, we only focus on business logic, do not need to manually manipulate DOM, do not need to pay attention to View and Model synchronization

2. What is vue-router? What are the components?
  • Vue Router is the official route manager of vue.js. Its deep integration with vue.js core makes building single-page applications a breeze.
  • <router-link>and<router-view>and<keep-alive>
3. Which component is an active-class property?

Active-class is a router-link terminal property used to toggle the selected styles that will be applied when the router-link tag is clicked

4. How to define a vue-router dynamic route? How do I get the passed value?
  • A dynamic route is created using the path attribute. The dynamic path parameter starts with a colon (:) as follows:
{
  path: '/details/:id'
  name: 'Details'
  components: Details
}
Copy the code

Accessing all files in the Details directory, if Details/A, Details/B, etc., will be mapped to the Details component.

  • When a route under /details is matched, the parameter value is set to this.$route.params, so dynamic parameters can be obtained by using this property
console.log(this.$route.params.id)
Copy the code
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
})
Copy the code

  • To :Route, representing the destination to be entered, is a routing object.

  • From :Route: represents the Route that is currently leaving and is also a Route object

  • Next :Function, which must be called, depending on the parameters of the next method call

    • Next (): Goes to the next hook in the pipe. If all hooks are executed, the navigation state is comFirmed.
    • Next (false): current navigation of the terminal. If the browser URL changes, the URL is recharged to the address corresponding to the FROM route.
    • Next (‘/’) | | next ({path: ‘/’}) : to jump to a different address. Current navigation terminal, perform a new navigation.
The next method must be called otherwise the hook function cannot resolve
  • Global post-hook
router.afterEach((to, from) = {
 // to do somethings
})
Copy the code

  • The post-hook does not have a next function and does not change the navigation itself.

  • Route exclusive hooks

    • beforEnter
const router = new VueRouter({
  routes: [{path: '/home'.component: Home，
      beforeEnter: (to, from, next) = {
        // to do somethings
        // The argument is the same as the global guard argument}}}])Copy the code
  • Component navigation hooks
const Home = {
  template: `<div></div>`,
  beforeRouteEnter(to, from, next){
    // called before the corresponding route to render the component is confirmed
    // Cannot get component instance 'this' because the component instance has not been created before the guard executes
  },
  beforeRouteUpdate(to, from, next){
    // Called when the current route changes but the component is being reused
    // Example: for a dynamic parameter path, /home/:id, when jumping between /home/1 and /home/2
    // Since the same Home component will be rendered, the component instance will be reused and this hook will be called in this case.
    // Access component instance 'this'
  },
  beforeRouteLeave(to, from, next){
    // called when navigating away from the component's corresponding route
    // Access component instance 'this'}}Copy the code
  • The beforeRouterEnter cannot access this because the guard is called before navigation is confirmed, so the new component has not yet been created and can be accessed by passing a callback to Next. The callback is executed when the navigation is validated, taking the instance as the method parameter of the callback.
const Home = {
  template: `<div></div>`,
  beforeRouteEnter(to, from, next){
    next( vm = {
      // Access the component instance through 'vm'}}})Copy the code
$router $route $router
  • The Router is an instance of the VueRouter. It is a global routing object that contains hop methods, hook functions, and so on.
  • Route is routing information object | | jump route objects, each object of a route is a route, is a local object that contains the path, params hash, query, fullPath, matched, routing information parameters such as the name.
7. Vue-router responds to route parameter changes
  • Watch is used to inspect
// Executes when the current route changes
watch: {
  $route(to, from) {console.log(to.path)
    // Respond to routing changes}}Copy the code
  • Component navigation hook functions
beforeRouteUpdate(to, from, next){
  // to do somethings
}
Copy the code
8. Vue – the router to participate
  • Params
    • You can only use name, not path
    • Parameters are not displayed on the path
    • The browser force refresh parameter is cleared,
  // Pass parameters
  this.$router.push({
    name: Home，
    params: {
    	number: 1 ,
    	code: '999'}})// Receive parameters
  const p = this.$route.params
Copy the code

  • Query:

    • Parameters are displayed on the path and the refresh is not cleared
    • Name can use the path path
// Pass parameters
this.$router.push({
  name: Home，
  query: {
  number: 1 ,
  code: '999'}})// Receive parameters
const q = this.$route.query
Copy the code
9. Two modes of vue-Router

  • hash

    • The principle is the onHashchage event, which you can listen for on the window object
window.onhashchange = function(event){
  console.log(event.oldURL, event.newURL)
  let hash = location.hash.slice(1)}Copy the code

  • history

    • Takes advantage of the new pushState() and replaceState() methods in the HTML5 History Interface.
    • Background configuration support is required. If the server does not have a resource responding to the refresh, it will spawn 404,
10. Vue-router implements lazy route loading (dynamic route loading)
  • Dividing the components corresponding to different routes into different code blocks and loading the corresponding components only when the routes are accessed is lazy loading of routes, which can accelerate the loading speed of projects and improve efficiency
const router = new VueRouter({
  routes: [{path: '/home'.name: 'Home'Component: () =import('.. /views/home')}]})Copy the code

The above is a summary of a lot of peer sharing and official documents, if there is any wrong, please point out, finally thank you for watching, for praise, for share, for comments, for rewards ~~