vue组件简介以及页面跳转

vue组件

<template>
  <div>
      <!-- 调用头部组件: 注册用驼峰，组件调用使用"-"连接 -->
      <nav-bar
       leftText="城市"
       rightText="返回"
       bgcolor="red"
       @rclick="navBarRClick"
      ></nav-bar>
      <!-- 直接调用 -->
      <navBar>
          <!-- 替换默认插槽的位置 -->
          <div>
               <h1>略略</h1>
                <p>啦啦</p>
          </div>
          <!-- 向center插槽中放入数据结构 -->
          <template #center>
              <h2>我是center</h2>
          </template>

          <!-- 向right插槽中放入数据结构 -->
          <template #right>
               <h3>我是right</h3>
          </template>
      </navBar>
      <!-- 单标签调用 -->
      <navBar/>

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

<script>
// 引入
// import navBar from '@/components/navBar/index.vue'
export default {
    // components : { //注册  注册的 akey : 组件对象
    //     navBar
    // },
    data(){
        return {
            subData : ""
        }
    },
    methods : {
        navBarRClick(data){
            console.log(data);
            this.subData = data;
        }
    }
}
</script>

<style>

</style>

<!-- 
   组件化：
   1、核心思想：是将 结构(html)、样式(css)、JS交互、数据
   先进行封装，在需要地方进行调用。本质上类同于
   函数的封装和调用
   2、创建组件：创建一个.vue文件
   3、导入组件： import 组件名 from "路径"
   4、注册组件： 
      4-1 ： 局部注册
      export default {
          components : {
               组件名
          }
      }   
      4-2 : 在main.js中
      // 全局注册组件
      Vue.component('组件名', ()=>import(组件路径));
    5、组件定义构成
       props : 定义组件的行间属性 用来接收父级组件传入的数据
       简易定义
       props : [“pro1”,"pro2","pro3"..]
       带验证定义
       props : {
           pro1 : {
               type : String / Array / Number /Boolean /Object
           },
           pro2 : {}...
       }

       2、自定义事件
          组件内部 this.$emit("自定义事件名","传递参数")
          <com @自定义事件名=“事件处理函数”></com>
          事件处理函数(传递的参数){  。。。。。  }

       3、插槽 Slot 相当于在组件内部定义了一些“占位符”
          用于对组件结构进行扩展
          <slot></slot> 默认插槽
          <slot name="center"></slot>具名插槽
          调用方式
          <com>
              <div>......默认插槽</div>
              <template #center>...具名插槽</template>
          </com>
 -->

vue页面跳转

**<template>
   <div>
       <h1>A</h1>
    
       <!--  1、通过标签跳转  2、通过api跳 -->
       <!-- 基本写法  to="/path"-->
       <router-link to="/b">跳转到B</router-link>
       <br>
       <!-- a标签用于第三方页面跳转 -->
       <a href="http://www.baidu.com">a标签跳转百度</a>
       <br>
       <!-- router-link用于 vue页面之间的跳转 -->
       <router-link to="http://www.baidu.com">百度一下</router-link>

        <!-- 写法2 :to="{}" -->
        <br>
       <router-link :to="{path : '/b'}">B页面{path : "/b"}</router-link>
        <br>
        <!-- 写法2:命名路由跳转 -->
        <router-link :to="{name : 'B'}">B页面{ name : 'B'}</router-link>
        <br>
        <!-- 写法3:传递数据 query数据 -->
        <router-link 
        :to="{
            path : '/b',
            query : {
                id : 'x001',
                name : '手机',
                price : 123,
                type : {
                    brand : '华为',
                    prices : [100,200,3090,120]
                }
            }
        }"
        >B页面传递 query数据</router-link>
       <!-- 写法3: 传递param数据 -->
       <br>
       <router-link
       :to="{
           name : 'B',
           params : {
               id : 's003',
               name : '电饭锅',
               price : 888,
                type : {
                    brand : '华为',
                    prices : [100,200,3090,120]
                }
           }
       }"
       >B页面传递 param数据</router-link>

       <!-- 
           query 传参 和 params传参的区别
           1、安全性不同
              query数据将拼接在浏览器url是可见的
              params数据传递不可见
           2、配合路由不一样
              query与 path:"/route"配合
              params 与  name : "route名称"
           3、传递的数据类型限制不一样
              query：一般只用来传递普通的key=value 
              值一般是number,string,boolean。
              如果传递的是一个数组。对象。会有两个问题
              1、对象和数组会被进行字符串转码，转成【object Object】
              2、传递的数据过多，拼接在浏览器url后面的字符串长度就会
              过长，浏览器url栏字符长度是有限的，过多的数据会导致
              数据丢失不完整
              params：传递数据没有限制
            
            4、跳转到目标页后，页面刷新 query数据不会丢失，但是
               params数据会丢失。
            
            5、目标页面接收数据的方式不同
               query: 
               视图中： $route.query.key1  接收显示
               JS中    this.$route.query.key1

               params :
               视图中： $route.params.key2 接收显示
               JS中    this.$route.query.key2

            三种标签跳转的方式场景总结
            1、如果只单纯跳转，不传递参数 to="/path"
            2、如果需要传递普通的key=value，且刷新时保证数据页面
              数据存在 :to="{path:'/path', query:{}}"
            3、如果传递对象等复杂数据，或者传递数据量非常多
              用:to="{name : 'routename', params: {}}"
        -->

        <el-button @click.native="go">编程式导航 B</el-button>
        <el-button @click.native="go1">编程式导航 B query传参</el-button>
        <el-button @click.native="go2">编程式导航 B params传参</el-button>
        <el-button @click.native="go3">编程式导航 B replace跳转</el-button>
        <!-- 
            编程导航总结
            1、通过 this.$router.push() 记录页面栈跳转
                   this.$router.repalce() 直接替换当前页面栈
                   this.$router.back() 返回上级页面栈
            2、$route和 $router的区别

               $route 是配置路由的对象，用来记录每个路由配置的信息
               主要用于接收路由跳转传递的数据

               $router 是使用vue-router创建的路由对象 router
               里面有一堆API方法和属性，用于实现路由的跳转传参功能
               



         -->

   </div>
</template>

<script>
export default {
    methods : {
        go(){ // this.$router.push('/path')
            //直接调转
            this.$router.push('/b');
        },
        go1(){
            this.$router.push({
                path : "/b",
                query : {
                    id : "x0032",
                    name : "编程导航query传参",
                    price : "200"
                }
            })
        },
         go2(){
            this.$router.push({
                name : "B",
                params : {
                    id : "S0032",
                    name : "编程导航params传参",
                    price : "100"
                }
            })
        },
        go3(){
            // 直接替换A的页面栈记录
            this.$router.replace('/b');
        }
    }
}
</script>

<style>

</style>**