Vue2.0—Related Interview Questions

1. Is active-class the property of which component? How to define nested routes?

Answer: The router-link component of the vue-router module.

2. How to define the dynamic routing of vue-router? How to get the dynamic parameters passed?

Answer: In the file in the router directory, add: /d to the path attribute to use the router object

3. What are the types of navigation hooks for vue-router?

Answer: 3 types

The first type, global hook(to,from,next) Make judgment and intercept before the function jumps

beforeEach
beforeResolve
afterEach

//Define a route



const router = new VueRouter({ ... })



 



// Call before clicking



((to, from, next) => {



  // ...



})



//Click navigation and call



(route => {



  // ...



})

AI writing code

The second type: hooks in the component

beforeRouteEnter
beforeRouteUpdate (2.2 added)
beforeRouteLeave

let fromPath = '';



export default{



    beforeRouteEnter (to, from, next) {



// Called before rendering the corresponding route of the component is confirmed



// No!  able!  Get component instance `this`



// Because the component instance has not been created before the hook is executed



         fromPath = ;



         next();



    },



}

AI writing code

The third type: individual routing and exclusive components

beforeEnter

const router = new VueRouter({



  routes: [



    {



      path: '/foo',



      component: Foo,



      beforeEnter: (to, from, next) => {



        // ...



      },



      beforeEnter: (route) => {



        // ...



      }



    }



  ]



});

AI writing code

Answer: Preprocess the css, and current the cssfunctionWrite, define variables, nest;

Install css-loader first,node-loader, sass-loader and other loader modules,

existwebpack- Add an additional extension to the configuration file: extension,

Add another module: test and loader in module

5. What is scss? What are the installation steps in? What are the major characteristics?

Answer: Precompilation of css.



Steps to use:



Step 1: Use npm to lower three loaders (sass-loader, css-loader, node-sass)



Step 2: Find it in the build directory and add an extension.scss to the extends property



Step 3: Configure a module property in the same file



Step 4: Then add the lang attribute to the component's style tag, for example: lang=”scss”



What are the major characteristics:




1, variables can be used, for example ($ variable name=value);




2, you can use a mixer, for example ()




3, can be nested

AI writing code