下载路由：npm i vue-router@3.5.2 -S
<!-- 路由占位符 ： 其他的组件会替代 路由占位符 -->
<!-- 在App可不使用 但无组件渲染 -->
<!-- 根组件实际渲染到 public/index.html -->
<router-view/>
1.<!-- 路由跳转 -->
<!-- router-link 最终会渲染成a标签 to属性会渲染成href属性 -->
<router-link to="/page2"> 跳转到page2</router-link>
需要配置路径（配置路由）
// 导入依赖 node_modules 直接写依赖的名称
import Vue from 'vue'
// 导入页面组件 导入自己写的文件时必须使用相对路径
import Page1 from '../views/Page1.vue'
const routes = [
{
// 使用时路径，自己定义
path: '/page1',
// 自己定义
name: 'page1',
// 导入的页面组件名
component: Page1
},
2.组件的使用步骤:
1.创建组件
2.导入组件
// 引入公共组件
// 路径 @指向src文件夹
import HeaderView from '@/components/HeaderView.vue'
3.注册组件
components: {
// 注册组件
HeaderView : HeaderView，
// 当变量名和属性名一致时，可以省略变量名
HeaderView
}
4.使用组件
<header-view></header-view>
3。
<!-- 多个组件只显示一个 -->
<component :is="showComp"> </component>
4.父传子 （子组件 SonComp）
<son-comp :abc="msg"></son-comp>
data () {
return {
msg:"hello1"
}
},
子组件使用：
<p>{{abc}}</p>
// 用来接收父组件传递的参数
// 数据的元素是父组件的属性名
// 单向数据流(父->子 )
// props:['abc'],
props:{
//名:类型
'abc':String
// abc:{
// type:String,//数据类型
// default:'ok!' //默认值
// }
},
5.子传父 子组件 （ZoomIn）
父组件：
<!--自定义事件 -->
<zoom-in @fangda="handle"></zoom-in>
methods:{
handle(val){
this.fs=val
}
},
子组件：
<button @click="fun()">放大</button>
fun(){
this.num++
// $emit 触发自定义事件
this.$emit('fangda',this.num)
}
},
