Vue component introduction and page Jump

vue Components

<template>
  <div>
      <!--  Call the header component :  Hump for registration , Component calls use "-" Connect  -->
      <nav-bar
       leftText=" City "
       rightText=" return "
       bgcolor="red"
       @rclick="navBarRClick"
      ></nav-bar>
      <!--  Call directly  -->
      <navBar>
          <!--  Replace the position of the default slot  -->
          <div>
               <h1> Brief introduction </h1>
                <p> La! </p>
          </div>
          <!--  towards center Put the data structure in the slot  -->
          <template #center>
              <h2> I am a center</h2>
          </template>

          <!--  towards right Put the data structure in the slot  -->
          <template #right>
               <h3> I am a right</h3>
          </template>
      </navBar>
      <!--  Single label call  -->
      <navBar/>

      <h1>{
    {
     subData }}</h1>
  </div>
</template>

<script>
//  introduce 
// import navBar from '@/components/navBar/index.vue'
export default {
    
    // components : { // register   Registered  akey :  Component object 
    // navBar
    // },
    data(){
    
        return {
    
            subData : ""
        }
    },
    methods : {
    
        navBarRClick(data){
    
            console.log(data);
            this.subData = data;
        }
    }
}
</script>

<style>

</style>

<!-- 
    Componentization ：
   1、 The core idea ： Yes, it will   structure (html)、 style (css)、JS Interaction 、 data 
    Package first , Call where needed . Essentially similar to 
    Function encapsulation and call 
   2、 Create components ： Create a .vue file 
   3、 Import components ： import  Component name  from " route "
   4、 Certified components ： 
      4-1 ：  Partial registration 
      export default {
    
          components : {
    
                Component name 
          }
      }   
      4-2 :  stay main.js in 
      //  Global registration component 
      Vue.component(' Component name ', ()=>import( Component path ));
    5、 Component definition constitutes 
       props :  Define the inter line properties of the component   It is used to receive data from parent components 
        Simple definition 
       props : [“pro1”,"pro2","pro3"..]
        With validation definitions 
       props : {
    
           pro1 : {
    
               type : String / Array / Number /Boolean /Object
           },
           pro2 : {
    }...
       }

       2、 Custom events 
           Inside the component  this.$emit(" Custom event name "," Pass parameters ")
          <com @ Custom event name =“ Event handler ”></com>
           Event handler ( Parameters passed ){
      .....  }

       3、 slot  Slot  It is equivalent to defining some... Within the component “ Place holder ”
           Used to extend the component structure 
          <slot></slot>  Default slot 
          <slot name="center"></slot> A named slot 
           Call mode 
          <com>
              <div>...... Default slot </div>
              <template #center>... A named slot </template>
          </com>
 -->

vue Page Jump

**<template>
   <div>
       <h1>A</h1>
    
       <!--  1、 Jump through the tag   2、 adopt api jump  -->
       <!--  The basic way of writing   to="/path"-->
       <router-link to="/b"> Jump to B</router-link>
       <br>
       <!-- a Tags are used to jump to third-party pages  -->
       <a href="http://www.baidu.com">a The label jumps to Baidu </a>
       <br>
       <!-- router-link be used for  vue Jump between pages  -->
       <router-link to="http://www.baidu.com"> use Baidu Search </router-link>

        <!--  How to write it 2 :to="{}" -->
        <br>
       <router-link :to="{path : '/b'}">B page {
    path : "/b"}</router-link>
        <br>
        <!--  How to write it 2: Named route jump  -->
        <router-link :to="{name : 'B'}">B page {
     name : 'B'}</router-link>
        <br>
        <!--  How to write it 3: To transfer data  query data  -->
        <router-link 
        :to="{
    
            path : '/b',
            query : {
    
                id : 'x001',
                name : ' mobile phone ',
                price : 123,
                type : {
    
                    brand : ' Huawei ',
                    prices : [100,200,3090,120]
                }
            }
        }"
        >B Page delivery  query data </router-link>
       <!--  How to write it 3:  Pass on param data  -->
       <br>
       <router-link
       :to="{
    
           name : 'B',
           params : {
    
               id : 's003',
               name : ' rice cooker ',
               price : 888,
                type : {
    
                    brand : ' Huawei ',
                    prices : [100,200,3090,120]
                }
           }
       }"
       >B Page delivery  param data </router-link>

       <!-- 
           query  The ginseng   and  params The difference between biography and reference 
           1、 Different security 
              query The data will be spliced in the browser url Is visible 
              params Data transfer is not visible 
           2、 The coordination route is different 
              query And  path:"/route" coordination 
              params  And   name : "route name "
           3、 Different data type restrictions are passed 
              query： Generally, it is only used to pass the common key=value 
               The value is generally number,string,boolean.
               If you pass an array . object . There will be two questions 
              1、 Objects and arrays are transcoded as strings , Turn into 【object Object】
              2、 Too much data passed , Splice in browser url The length of the following string will be 
               Too long , browser url Column character length is limited , Too much data can lead to 
               Data loss incomplete 
              params： There are no restrictions on transferring data 
            
            4、 Jump to the target page , page refresh  query Data will not be lost , however 
               params Data will be lost .
            
            5、 The target page receives data in different ways 
               query: 
                In the view ： $route.query.key1   Receive display 
               JS in     this.$route.query.key1

               params :
                In the view ： $route.params.key2  Receive display 
               JS in     this.$route.query.key2

             Summary of three ways of label jump 
            1、 If you just jump , Do not pass parameters  to="/path"
            2、 If you need to pass the normal key=value, And ensure that the data page is refreshed 
               Data exists  :to="{path:'/path', query:{}}"
            3、 If you transfer complex data such as objects , Or the amount of data transferred is very large 
               use :to="{name : 'routename', params: {}}"
        -->

        <el-button @click.native="go"> Programming navigation  B</el-button>
        <el-button @click.native="go1"> Programming navigation  B query The ginseng </el-button>
        <el-button @click.native="go2"> Programming navigation  B params The ginseng </el-button>
        <el-button @click.native="go3"> Programming navigation  B replace Jump </el-button>
        <!-- 
             Program navigation summary 
            1、 adopt  this.$router.push()  Record page stack jump 
                   this.$router.repalce()  Directly replace the current page stack 
                   this.$router.back()  Return to the upper page stack 
            2、$route and  $router The difference between 

               $route  Is the object for configuring the route , It is used to record the information of each route configuration 
                It is mainly used to receive data transferred by route jump 

               $router  It's using vue-router Created routing object  router
                There is a pile of API Methods and properties , It is used to realize the jump parameter transmission function of routing 
               



         -->

   </div>
</template>

<script>
export default {
    
    methods : {
    
        go(){
     // this.$router.push('/path')
            // Direct transfer 
            this.$router.push('/b');
        },
        go1(){
    
            this.$router.push({
    
                path : "/b",
                query : {
    
                    id : "x0032",
                    name : " Programming navigation query The ginseng ",
                    price : "200"
                }
            })
        },
         go2(){
    
            this.$router.push({
    
                name : "B",
                params : {
    
                    id : "S0032",
                    name : " Programming navigation params The ginseng ",
                    price : "100"
                }
            })
        },
        go3(){
    
            //  Direct replacement A Page stack record of 
            this.$router.replace('/b');
        }
    }
}
</script>

<style>

</style>**