Encapsulating custom plug-in Libraries

1. Define a component
   • Is a single file component Loading.vue
2. Registration component

  import Loading from './components/Loading.vue'
  export const loading = {
    install () {
      Vue.component( 'Loading', Loading)
    }
  }
  

1. Use components

  import Loading from './xxx/loading/index.js'
  Vue.use(Loading)

Router

Basics

1. There are several modes of vue routing. What are they? In which environments?

   • Hash: Use the URL hash value for routing. Support all browsers, including those that do not support HTML5 History Api.

   • history: Depends on HTML5 History API and server configuration. [Backend support is required]

   • abstract: Supports all JavaScript runtime environments, such as Node.js server side. If no browser API is found, routing will automatically be forced into this mode.

2. Routing steps

   1. Install vue-router yarn add vue-router-S

   2. Create a router directory under the src directory, which creates an index.js file, which is the module of router

   3. Introduce third-party dependency packages and register routing

        import Vue from 'vue'
        import VueRouter from 'vue-router'
      
        Vue.use( VueRouter ) //Use vue-router as a third-party plug-in
      

      Note: The import keyword should be placed at the top of the entire file.

   4. Create a router object instance and create a routing table

        const routes = [ 
          {
            path: '/home',
            component: Home
          }//Every object is a routing
        ]
        const router = new VueRouter({
          routes//Routing table must be written
        })
      

   5. Export router instance
      export default router

   6. router is introduced into the entry file main.js, and then registered in the root instance

        import router from './router/index.js'
        new Vue({
          router,
          render: (h) => App 
        }).$mount('#app')
      

   7. Give routing a route display area

      1. If so and routing, then we put it in the App component, represented by a router-view component

       <router-view />
      

   8. When the page opens for the first time, you need to do a redirect, which is to automatically jump to the / home route.

          const routes = [
            { //We require that this routing configuration be placed at the top of the routing table
              path: '/',
              redirect: '/home'
            }
          ]
      

   9. Business: Error routing matching,

          const routes = [
            {
              path: '/',
              redirect: '/home'   //redirect
            },
            {
              path: '/home',
              component: Home
            },
            {
              path: '/list',
              component: List
            },
            {
              path: '/detail',
              component: Detail
            },
            {
              path: '/login',
              component: Login
            },
            {
              path: '/register',
              component: Register
            },
            {
              path: '/user',
              component: User
            },
            {
              path: '/shopcar',
              component: Shopcar
            },
            {
              path: '/error',
              component: Error
            },
            {  //This is the wrong routing matching, vue stipulates that this must be placed at the bottom, it must find all the above routes, can not find the current one.
              path: '**',
              redirect: '/error'
            }
          ]
      

   10. Determination mode of vue routing mode

       1. If you use hash, the a tag will do.
       2. If you use history, we'd better change the a tag to router-link
          • router-link must have a to attribute on the component

   11. Two level routing

       const routes = [
         {
           path: '/shopcar',
           component: Shopcar,
           children: [
             {
               path: 'yyb', //Do not write /
               component: Yyb
             }
           ]
         }
       ]
   

   • Note: After you have written the configuration, don't forget to write the route display area in the corresponding first-level routing component.
   1. Named route

      Function: Short path

        {
            path: '/shopcar',
            component: Shopcar,
            //Subrouter 
            children: [
              { 
                path: 'yyb', // Easy to make mistakes/yyb X 
                component: Yyb,
                name: 'yyb' //Named route
              },
              {
                path: 'junge',
                component: Junge
              }
            ]
            
          },
      

      • Use:

          <router-link :to = "{name:'yyb'}"/>
        

   2. Dynamic Routing-Routing Reference-Routing Access Reference

Advanced