4 Vue（组件树结构+组件展示页面）

组件在webpack/cli2/cli3/cli设置不同处的书写方式

JS文件夹：组件文件夹（页面+小组件）vue

//如果两个标签中间为空，可以写成单标签
<template>
<其他小组件></其他小组件>
<div></div>
</template>


<script>
import 小组件名称 from "其他小组件的位置"

export default{
     name:"App11",    //设定main.js 
     data(){
        return{}
     },
     components:{
        其他小组件     //注册其他小组件
     }
}

</script>


<style></style>

JS文件夹：入口文件main.js

//webpack方式，runtime+compiler方式
import APP11 from "地址"

new Vue({
el:"#app"  //展示位置是div为id=app处
components:{
App11    //注册app组件
}
template:"<App11></App11>"  //将App11组件展示到html，来源组件页面
})

//runtime only 方式
import APP11 from "地址"

new Vue({
el:"#app"  //展示位置是div为id=app处
render：h=>h(APP11)
})

//cli3方式
import APP11 from "地址"

new Vue({}).$mount("id名称")

HTML页面index.html

<div id="app">
空
</div>

前端路由（vue-router）：单页面跳转url(更换)子组件

定义：

1. 当页面组件需要更换子组件时，需要用vue-router
2. 基础：「组件在webpack/cli2/cli3/cli设置不同处的书写方式」
3. 只对组件进行一次包装，对main.js和html无影响（有引用包的关系）
4. 在router文件夹设置url和组件的关系，在组件内部跳转url完成对组件的更换

（1）JS文件夹：组件文件夹（页面）vue，跳转url

//跳转url
<router-link to "跳转位置">a标签<router-link> //更换url
<router-link to "跳转位置" tag="button">a标签<router-link> // 更换跳转的html样式
<router-link to "跳转位置" replace >a标签<router-link> //history不让浏览器返回按钮
<router-link to "跳转位置" active-class="class名称">a标签<router-link> //直接在父组件/页面组件 写css代码即可
<router-link to "跳转位置" class="router-link-active">a标签<router-link>//自带class样式


<div @click=""></div>  //手动实现router-link 
methods{ "":{
this.$router.push("/路径")//可以浏览器返回
this.$router.relpace("/路径")//不可以浏览器返回
}}

//子组件站位代码
<router-view></router-view>  //更换的子组件站位

<keep-alive> //点击按钮加载组件的时候，保留对上一个组件的状态设置
<router-view exclude " name值，name值2"></router-view> //不保留name值的上一个组件的状态设置
</keep-alive>

（2）配置文件：router文件夹，创建小组件与url的映射关系

1.安装前端路由：npm install vue-router --save
2.src文件夹中创建文件夹router
3.router文件夹内创建index.js文件，配置前端路由映射信息

//index.js内
(步骤1)import VueRouter from "vue-router"  //导入router第三方包插件
      import vue from "vue" //导入vue
      
      import "组件名称" from "src内组件地址" 
      或者
      const 懒加载名称 =  ()=> import( "组件路径" )//定义，客户端和服务端相当于做一个异步实时同步js文件，影响webpack打包生成的js文件数量
(步骤2)vue.use(VueRouter) //安装插件,插件都需要use，框架不需要

(步骤3)const router = new VueRouter({    //创建路由对象
routes,
mode："history"  //默认hash，将hash转化为history方法
}),
linkActiveClass：""  //修改所有跳转router-link的默认css属性名

(步骤4)const  routes = [         //配置路由映射关系
{path: "/home",component: "组件名称" 或者 "懒加载名称"}, //配置url和组件的基本代码
{path : "/",redirect："路径"},  //重定向，当url没有拼接时，自动拼接个路径（实现页面载入时显示某个小组件）
{path: "/home",component: "懒加载名称",children:[{path:"home",compinent:"懒加载"}]}//路由嵌套，需要在父路由html代码处继续套娃router-view，此处就不在上面补充了，想不明白重新学把，子组件router-link需要完整路径
{path: "/home",component:"懒加载名称",meta：{title:内容}} //添加导航守卫时，每个path自带的元数据，描述数据的数据
]

(步骤5)//设置全局导航守卫，在前端路由组件跳转时拦截，添加转圈/更改title
router.beforeEach(function(to,from,next){ //从form跳转到to，跳转前回调
document.title = to.matched[0].meta.title //更改前端路由页面title，mathed的来由是根据对象一点点测试出来的
next()//固定写法})
(步骤6)//两个可以都写，其他的组件守卫，路由独享守卫和vue实例的回调函数差不多作用，可以去官网另学习
router.afterEach(function(to,from ){ //跳转后回调，不需要next
document.title = to.matched[0].meta.title
})

(步骤7)export default router  //将路由对象关联到vue实例中

（3）JS文件夹：入口文件main.js

//main.js入口文件需要导入vue-router文件夹内index.js文件
import router from "router地址"
//需要挂载router
new Vue({
el:"#app"  //展示位置是div为id=app处
router
})

（4）HTML页面index.html：正常

//区别
.$route：数据
.$router：结构（跳转时）

插槽

（1）子组件html预留插槽空位
（2）父组件template注册子组件，父组件html使用子组件时，自定义插槽代码

//子组件html

//单个插槽
<slot></slot>  //插槽为空，在调用代码时补  
<slot>html代码</slot>  //插槽带默认值，调用时候替换 （此时插槽data来源是子组件）  
//多个插槽
<slot  name= " ">html代码</slot>

//父组件template注册后，在父组件html引用时
//单个插槽
<lzy><button></button></ lzy>    （此时插槽data来源是父组件）
//多个插槽
<lzy><button slot=" "></button></ lzy>

组件定义（没用：为组件配合cli时的推导过程）

定义：组件在vue实例作用范围内使用（js文件中vue对象el绑定的html的div内使用）

全局组件：在vue文件内全局注册后，任何vue实例处都可用

//全局组件

//vue文件————————————————————————
//1.注册组件构造器对象
const cpnC = Vue.extend({
    //template翻译：模版
    template: `<div>哈哈</div>`
});
//2.注册组件
//第一个参数：`引用组件时元素名`，第二个参数：组件构造器
Vue.component(`lzy`, cpnC)

//语法糖
Vue.component(`lzy`,`全部的template代码` )

//main.js内vue实例————————————————————————
无关

//html————————————————————————
直接写代码lzy

局部组件：需要在vue实例处注册，只在本vue实例处有用

//局部组件

//vue文件————————————————————————
//1.注册组件构造器对象
const cpnC = Vue.extend({
    //template翻译：模版
    template: `<div>哈哈</div>`
});
//语法糖：此处为空

//main.js内vue实例————————————————————————
//2.注册组件
//第一个参数：`引用组件时元素名`，第二个参数：组件构造器
components:{
lzy: cpnC   //注册app组件
}
//语法糖：将cpnC替换成`全部的template代码`

//html————————————————————————
替换到id处

//vue文件内data为什么要写成函数：多次调用组件时，函数保证每个组件的data内容唯一
//如果需求是点一个组件其他的组件一模一样的话，就得将数据作为对象抽出来了，指针的问题了
data(){
return{
变量名：值
}
}