Vue2. X and Webpack stomp pits

#Vue2.x

### ### ### ### ### ### ### ### ### ### ### ### #

Execute when the anchor part changes;

In this case, it becomes the basic operation mode of routing, but hash mode will make the link /#/, hash mode is not convenient to back up, and cannot be used to locate the trace point. If you use the hash method, to keep the page from refreshing, you do this:

Href =’#/home’ href=’#/home’ href=’#/home’

So you have the Hidtory model. Usage of history mode:

new router({
mode:'history',

routes:[]
})Copy the code

In histroy mode, using a tag will skip links to refresh the page, because the default behavior of a tag is
(both hash and history are supported).

In real development, if we want to record the position of the scrollbar while moving forward or backward, i.e. one page before the backward, we can add the scrollBhavior object to the vueRouter:

ScrollBehavior (to,from,savePosition){// Console.log (to) is triggered when you click the browser forward or backward, or switch navigation; Console.log (from); console.log(from); // Exit route object, from where console.log(savePosition); // Record the scroll bar coordinates, the value recorded when clicking forward or back // a way to set the coordinates //if(savePosition){
        //     return savePosition;
        // }else{
        //     return {x:0,y:0}
        // }
        //hashPatterns, the other way aroundif(to.hash){
            return {
                selector: to.hash
            }
        }
    }Copy the code

In hash mode, we need to add “/# XXX “to the component’s path, and we need to add id=” XXX” to the article’s trace.

/user/userId //userId // parmas for dynamic path parameters:

<template>
    ...
    <ul>
       <li v-for="app in appList">
            <router-link :to="'/User/'+item.id" v-for="(item,index) in userList">{{item.userName}}</router-link>
       </li>
    </ul>   
     ...       
</template>Copy the code

In the imported route, you need to write

{
    path:'/User/:userId? ',
    component:User
}Copy the code

###4, navigate to the position where the hook function executes:

Router Indicates a single global routing component

Hook functions:

BeforeEach, afterEach in a single route: beforeEnter Components hooks: beforeRouteEnter, beforeRoteUpdate, beforeRouteLeave

Parameters to the hook function: to: destination to enter, route object, where to go from: Route object to leave, where to come from Next: used to decide to jump or unnavigate

Vue.js instances are created with a series of initialization steps, such as creating data observations, compiling templates, creating data bindings, etc.

Segmentfault.com/a/119000000…

beforeCreate

After instance initialization, data Observer and Event/Watcher events are called before configuration. Data observations, events, and so on have not yet been initialized.

created

Called after the instance has been created. In this step, the instance completes the configuration of data Observer, property and method operations, and Watch/Event event callbacks. However, the mount phase has not yet started and the $EL attribute is not currently visible.

beforeMount

Called before the mount begins: The associated render function is called for the first time.

mounted

El is replaced by the newly created vm.$el, which is called after being mounted to the instance.

beforeUpdate

Called when data is updated, before the virtual DOM is re-rendered and patched. You can further change the state in this hook without triggering additional rerendering.

updated

This hook is called after the virtual DOM is re-rendered and patched due to data changes. When this hook is called, the component DOM has been updated, so you can now perform DOM-dependent operations. In most cases, however, you should avoid changing the state during this period, as this can lead to an infinite update loop. This hook is not called during server-side rendering.

beforeDestroy

Called before instance destruction. At this step, the instance is still fully available.

Called after the Destroyed Vue instance is destroyed. When called, everything indicated by the Vue instance is unbound, all event listeners are removed, and all subinstances are destroyed. This hook is not called during server-side rendering.

Localhost: 8080 cannot be displayed because the global proxy is enabled