Usage Vue-Router principle and source parsing (five) router-link assembly

The component supports user applications with routing functions in (click) navigation, default rendered <a> label with the correct link can be generated by another tag tag attribute.

It is essentially generated by a label bound to the click event, and then performs the corresponding instance VueRouter push () implementation, for router-link assembly, you can pass the props:

• to indicate the route of the link destination, when clicked, will immediately inside the value to pass to router.push (), so this value can be a string or a description of the target position of the object
• tag router-link component rendering tag name, a default
• exact boolean "is activated," according to the default class name is included match
• append Boolean type, the append attribute set, add group Road King before the current (relative) Road King
• replace Boolean type, after setting replace, when clicked, will call router.replace () instead router.push (), history will not leave this record after navigation
• CSS class name to use when activated activeClass link
• exactActiveClass configuration when the link is activated should exactly match the class
• event declaration can be used to trigger navigation events. It may be a string or an array of strings comprising

For chestnut:

 writer by: Desert QQ: 22969969

    <div id="app">
        <router-link to="/info/1">详情页1</router-link>     
        <router-link to="/info/2" event="mouseover">详情页2</router-link>       
        <router-link to="/info/3" tag="p">详情页3</router-link>     
        <hr/>
        <router-view></router-view>
    </div>
    <script>                   
        const info  = { template:'<div>id:{{this.$route.params.id}}</div>'}
        const routes = [                                   
            {path:'/info/:id',component:info,name:'info'},
        ]
        const app =  new view ({                                                     
            on: ' #app ' ,
            router:new VueRouter({routes})
        })
    </script>

After rendering DOM as follows:

You can see the second routerlink component rendered into p tag, when we click the effect is as follows:

You can see details on page 3 did not click, move the mouse up, it will automatically switch routing, and this is because we are introduced to the event, in the above bound onmouseover event.

router-link assembly from a render function defined as follows:

was Link = {
  name: 'RouterLink',
  props: {                           // can be passed props 
    to: {
      type: toTypes,
      required: true
    },
    tag: {
      type: String,
      default: 'a'
    },
    exact: Boolean,
    append: Boolean,
    replace: Boolean,
    activeClass: String,
    exactActiveClass: String,
    event: {
      type: eventTypes,
      default : 'click'                       // default click event
    }
  },
  render: function render (h) {        // Router-Link assembly render function corresponding to the function h on the createElement equal to $ large VUE 
    var  the this $. 1 = the this ;

    var Router = the this $ Router;.                                 // Get $ Router instances 
    var Current = the this $ route;.                                 // current routing object 
    var REF = router.resolve ( the this .to, Current, the this .append);
     var LOCATION REF = .location;                               // address to jump, an object; for example: Normalized {_: to true, path: "/ Login", Query: {...}, the hash: ""} 
    var route = ref.route;                                     // route Object 
    var the href = ref.href;                                       // the href attribute
 
    var classes = {};                                          // this code and linkActiveClass, linkExactActiveClass disposed about 
    var globalActiveClass = router.options.linkActiveClass;
     var globalExactActiveClass = router.options.linkExactActiveClass;
     // Support Global Active empty class 
    var activeClassFallback = globalActiveClass == null 
      ? 'router-link-active'
      : globalActiveClass;
    var exactActiveClassFallback = globalExactActiveClass == null
      ? 'router-link-exact-active'
      : globalExactActiveClass;
    var activeClass = this.activeClass == null
      ? activeClassFallback
      : this.activeClass;
    var exactActiveClass = this.exactActiveClass == null
      ? exactActiveClassFallback
      : this.exactActiveClass;
    var compareTarget = location.path
      ? createRoute(null, location, null, router)
      : route;

    classes[exactActiveClass] = isSameRoute(current, compareTarget);
    classes[activeClass] = this.exact
      ? classes[exactActiveClass]
      : isIncludedRoute(current, compareTarget);

    var Handler = function (E) {                           // Bind event 
      IF (guardEvent (E)) {                                   // first call the function to filter out some of the events and navigation unrelated 
        IF ( the this $ 1.replace) {                                // If you set the replace properties 
          router.replace (LOCATION);                            // perform the handover router.replace navigation 
        } the else {
          router.push (LOCATION);                               // otherwise perform router.push update the navigation 
        }
      }
    };

    var ON = {click: guardEvent};                                // <Router-Link> assembly supported by default click event, the following will reset 
    IF (Array.isArray ( the this .event)) {
       the this .event.forEach ( function (E ) {ON [E] = Handler;});
    } else {
      on[this.event] = handler;
    }

    var Data = {                                               // In general, there is a reset on.click Handler 
      class: classes
    };

    IF ( the this .tag === 'a') {                                    // If a tag is a tag 
      data.on = ON;
      data.attrs = { href: href };
    } The else {                                                   // If the other tag           
      // Find Child and Apply The First <a> listener and the href 
      var A = findAnchor ( the this $ slots.. Default );                   // Find the first label <a> 
      IF (A) {                                                   // If it finds a tag a 
        // in a Case the static <a> IS Node 
        a.isStatic = to false ;
         var the aData = a.data = Extend ({}, a.data);
        aData.on = on;
        var aAttrs = a.data.attrs = extend({}, a.data.attrs);
        aAttrs.href = href;
      } The else {                                                   // if not found a label 
        // does not have have <a> Child, the Apply listener to Self 
        data.on = ON;                                              // the monitor itself 
      }
    }

    return H ( the this .tag, the Data, the this . $ slots. default )              // last call $ createElement to create the vnode 
  }
}

If a label within guardEvent function executes preventDefault () function tells the browser not to perform an action associated with the event, all actions such as setting the hash are achieved by VueRouter built-in code.