=============================================================================
vue生命周期： 很有用
任何的组件都是有生命周期的
生命周期函数：（常用）
created（）{ //当组件被创建出来之后，会回调这个生命周期函数
内容
}，
mounted（）{ //当组件中的template被挂载到DOM之后，会回调这个生命周期函数
内容
}，
updated（）{//当界面发生刷新之后，会回调这个生命周期函数
内容
}
destroyed（）{//当组件被销毁之后，会回调这个生命周期函数
内容
}
beforeDestroy（）{//当组件被销毁之前，会回调这个生命周期函数
内容
}
在组件里面使用：
==============================================================================
箭头函数的使用和this的指向：
1、无参数无返回值：
const aaa= () =>{
}
2、放入两个参数：
const sum=（num1,num2）=>{
return num1+num2
}
3、放入一个参数：
const sum=num=>{
return num*num
}
4、有多行代码：
const demo=（）=>{
console.log('hello world')
console.log('Hello demo')
}
5、只有一行代码：
const mul=（num1，num2）=>num1+num2
箭头函数与普通函数写法的this指向区别：
1、这种普通函数写法它会调用call，所以window就是它的this
function（）{
console.log(this)
}
2、箭头函数它会向外层作用域中一层层向外查找this，直到有this的定义：
const obj={
（）=>{console.log（this）} / /因为最外层是object类型所以是object也可以说是obj对象
}
=============================================================================
路由器的简单原理：
路由里面有一个映射表：{
内网ip1：电脑1的mac物理地址
内网ip2：电脑2的mac物理地址
内网ip3：电脑3的mac物理地址
内网ip4：电脑4的mac物理地址
内网ip5：电脑5的mac物理地址
}
路由器通过查找电脑的物理地址来获取对应的内外ip地址，然后发送数据到知道的机器上
后端渲染：
从浏览器发送一个url到服务器中，服务器里面会生成一个页面，
里面有html+css+java，其中java的作用是获取数据库的数据，然后动态地显示在页面中，
然后把整个页面又从服务器发送到浏览器上，就是说页面发送前就已经在服务器中生成了
后端路由：
后端服务器处理url和页面之间的映射关系
后端路由，JSP开发阶段：
前后端分离阶段：
后端只负责提供数据，前端负责页面中的显示内容以及通过js代码执行来最终渲染页面
前端路由阶段：
改变url，但不进行整体的刷新，会直接从路由抽取新的页面组件
原理：
用户输入url，
从静态资源服务器直接把所有数据请求过来，
静态资源服务器里面只有唯一的html、css、js文件，但是里面有很多依赖
再通过前端路由来进行抽取部分内容来展示，
相当于每一个后面细分的url就是映射一个页面组件，抽取的内容就是页面组件
API服务器连接着一个数据库
=============================================================================
页面通过不刷新来改变：
两种方法：
1、通过url的hash来改变：在浏览器的console中输入location.hash=‘名称’
2、通过HTML5中的history来改变：在浏览器中输入history.pushState({ 对象(可选) },‘ title(可选) ’,‘ 名称’)
HTML5中还有.back()、.go(num)、forward()、
.replaceState({ 对象(可选) },‘ title(可选) ’,‘ 名称’)-----------替换，无历史纪录
.pushState({ 对象(可选) },‘ title(可选) ’,‘ 名称’)--------------压栈，有历史纪录
==============================================================================
router文件夹中index文件原理：
路由启用的基本步骤：
import HelloWorld from '@/components/HelloWorld'
import Vue from 'vue' //导入vue
import Router from 'vue-router' //导入vue-router插件
Vue.use(Router)//通过use方法来安装插件
const router={//用来接收映射表，配置路由与组件之间的应用关系
routes: [//里面的内容就是映射表
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
}
const vueRouter=new Router({//用来创建一个router对象
router
})
export default vueRouter//导出router对象到vue实例中
上述对象导出之后挂载在实例中：
import Vue from 'vue'
import App from './App'
import router from './router' //会自动寻找文件夹下的index文件所以可以省略./router/index
Vue.config.productionTip = false
new Vue({
el: '#app',
router,//将路由对象挂载到实例中
render: h => h(App)
})
路由的使用步骤：
路由切换的时候知识切换我们router-view挂载的组件其他内容不会改变
最外层app.vue文件的模板
<template>
<div id=“app”>
<router-link to="/home">首页</router-link>//用于获取路由的映射组件
<router-link to="/about">关于</router-link>//to=”“
<router-view></router-view>//用于决定组件的显示位置，就是相当于一个占位符
</div>
</template>
router文件夹中index.js的内容：
最关键是分离代码的时候要注意映射表必须是const routes=[ 接收映射关系 ]
import Vue from 'vue' //导入vue
import Router from 'vue-router' //导入vue-router插件
import about from '../components/about.vue'
import home from '../components/home.vue'
Vue.use(Router)//通过use方法来安装插件
const routes=[//用来接收映射表，配置路由与组件之间的应用关系
{
path:'/',//没有值代表是默认时
redirect:'/home'//redirect表示重定向到/home路径中
},
{
path: '/home',
name:'home',
component: home
},
{
path: '/about',
name:'about',
component: about
}
]
const vueRouter=new Router({//用来创建一个router对象
routes,
mode:'history'//改为HTML5的history模式
})
export default vueRouter//导出router对象到vue实例中
简略写法：
// export default new Router({
// routes: [
// {
// path:'/',//没有值代表是默认时
// redirect:'/home'//redirect表示重定向到/home路径中
// },
// {
// path: '/home',
// name:'home',
// component: home
// },
// {
// path: '/about',
// name:'about',
// component: about
// }
// ],
// mode:'history'
// })
设置路由的默认值和修改为history模式：
在路由index文件中插入一个新对象作为默认对象
redirect重定向
还要再new里面加上mode：‘history’
const router={//用来接收映射表，配置路由与组件之间的应用关系
routes: [//里面的内容就是映射表
{
path:' ',//没有值代表是默认时
redirect:'/home'//redirect表示重定向到/home路径中
},
{
path: '/home',
component: home
},
{
path: '/about',
component: about
}
]
}
const vueRouter=new Router({//用来创建一个router对象
router
mode:'history'//改为HTML5的history模式
})
<router-link>标签的属性：
1、tag=’原生标签名‘，同于替换router-link最终转化
2、replace直接添加，用于不留下历史纪录
3、active-class
直接使用router-link-active类 来改变style：
通过代码跳转路由：
<template>
<div id="app">
<!-- <router-link to="/home" tag="button" replace>首页</router-link>
<router-link to="/about" tag="button" replace>关于</router-link> -->
<button @click="homeclick">首页</button>
<button @click="aboutclick">关于</button>
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
methods: {
homeclick(){
this.$router.push('/home')//vue-router内部有$router方法可以直接用
},
aboutclick(){
this.$router.push('/about')
}
},
}
</script>
<style >
.router-link-active{
color: brown;
}
</style>
==============================================================================
动态路由：
index.js里面需要添加映射关系，路径要添加 /:自定义名，意思是路径/user/后面要添加东西
最外层vue文件：
router-link的to要使用v-bind绑定data里面的变量来动态添加到to中
user组件里面调用：
$route表示获取当前活跃的映射关系，params表示获取参数，user_id就是index里面的/:自定义名
$router：表示获取整个new Router（{ }）对象
$route：表示获取当前活跃的映射关系
vue-router打包文件的解析：
1、app 开头的是打包你写的代码
2、manifest 开头的是打包用来做底层支撑的代码，例如支持commonJS语法的导入导出转换
3、vendor 开头的是打包第三方提供的插件和包，例如vue/axios/vue-router
vue-router懒加载的使用：
三种写法：
最常用第三种：
路由的嵌套：
1、创建两个组件
2、在路由配置映射关系
3、在home组件里面添加vueroute-viewr和vuerouter-link
2：映射关系index文件配置
const home=()=>import('../components/home.vue')//路由懒加载写法，会分别打包到不同文件
const about=()=>import('../components/about.vue')
const user=()=>import('../components/user.vue')
const homenews=()=>import('../components/homenews.vue')
const homemessages=()=>import('../components/homemessages.vue')
Vue.use(Router)//通过use方法来安装插件
const routes=[//用来接收映射表，配置路由与组件之间的应用关系
{
path:'/',//没有值代表是默认时
redirect:'/home'//redirect表示重定向到/home路径中
},
{
path: '/home',
name:'home',
component: home,
children:[//配置子映射关系
{
path:'',
redirect:'news'
},
{
path:'news',//不用在前面加上/
component:homenews
},
{
path:'messages',
component:homemessages
}
]
},
{
path: '/about',
name:'about',
component: about
},
{
path:'/user/:user_id',
name:'user',
component:user
}
]
3、home组件里面的模板：
<template>
<div>
<h2>我是首页</h2>
<p>我是首页内容，妙妙妙</p>
<router-link to="/home/news">新闻</router-link>//要用完整路径并且最前面要加上/
<router-link to="/home/messages">消息</router-link>
<router-view></router-view>
</div>
</template>
传递参数（一）：
1、使用params传递
2、使用query传递：配置文件一样但是to的传值不一样而且要使用v-bind
自定义组件模板：
最外层vue文件的模板：
参数传递（二）：
1、模板用@click监听方法
2、使用代码传值：是用$router不是$route
3、取值都是在自定义模板里面写$route.query.key
都是需要push或者replace
最外层模板：
所有的组件都继承自vue的原型：
只要你在vue的原型上定义了一个属性，那么其他组件就可以直接使用这个属性
组件中未定义name但是可以直接使用：
可以通过直接给原型添加属性的第二种方法：object.defineProperty（ 对象名，‘key'，value）
vue-router导航守卫：
index文件添加：自定义router对象接收名.beforeEach((to,from,next)=>{next()其他内容})
映射关系也要添加：meta：{属性key：value}代表的是元数据（用于描述数据的数据）
补充：
前置守卫（guard）也叫前置回调：
用于在程序跳转前就回调函数，要添加next（）
后置钩子（hook）也叫后置回调：
用于程序跳转之后才回调函数，不需要添加next（）
next（）的其他用法：
路由独享守卫可以添加到局部的映射关系里面：
组件内的守卫：（有时间看一下文档）
vue-router-keep-alive以及其他问题：
keep-alive：可以使组件跳转时不被销毁
自定义组件的script代码段：
可以实现记录原本的操作位置，组件不会被重复创建销毁，提高性能，用户体验也更好
<script>
export default {
name: 'home',
data() {
return {
path:'/home/news'
}
},
activated() {//当前组件活跃的时候会调用
this.$router.push(this.path)//这里使用router因为他有push方法
},
beforeRouteLeave(to,from,next){//离开当前组件前会调用
this.path=this.$route.path //这里用route因为可以获取属性
next()//记得加next
}
}
</script>
在最外层.vue文件添加<keep-alive> <router-view/> </keep-alive>：
假如不想全部组件都一起被禁止频繁创建销毁，可以使用keep-alive的一些属性：
1、excloud代表不包括
2、incloud代表包括
写法例子：
84
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
