vue生命周期:
Vue所有的生命周期钩子自动绑定在this上下文到实例中,因此你可以访问数据,对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法。这是因为箭头函数绑定了父上下文,因此this与你期待的Vue实例不同。
1、beforeCreate
在实例初始化之后,数据观测和event/watcher时间配置之前被调用。
2、created
实例已经创建完成之后被调用。在这一步,实例已经完成以下的配置:数据观测,属性和方法的运算,watch/event事件回调。然而,挂载阶段还没开始,$el属性目前不可见。
3、beforeMount
在挂载开始之前被调用:相关的render函数首次被调用。
该钩子在服务器端渲染期间不被调用。
4、mounted
el被新创建的vm.$el替换,并挂在到实例上去之后调用该钩子函数。如果root实例挂载了一个文档内元素,当mounted被调用时vm.$el也在文档内。
该钩子在服务端渲染期间不被调用。
5、beforeUpdate
数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。
你可以在这个钩子中进一步第更改状态,这不会触发附加的重渲染过程。
该钩子在服务端渲染期间不被调用。
6、updated
由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。
当这个钩子被调用时,组件DOM已经更新,所以你现在可以执行依赖于DOM的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。
该钩子在服务端渲染期间不被调用。
7、activated
keep-alive组件激活时调用。
该钩子在服务器端渲染期间不被调用。
8、deactivated
keep-alive组件停用时调用。
该钩子在服务端渲染期间不被调用。
9、beforeDestroy 【类似于React生命周期的componentWillUnmount】
实例销毁之间调用。在这一步,实例仍然完全可用。
该钩子在服务端渲染期间不被调用。
10、destroyed
Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
该钩子在服务端渲染不会被调用。
router生命周期
vue-router提供了三个钩子,beforeRouterEnter、beforeRouterUpdate、beforeRouteLeave。
beforeRouterEnter是讲道理是在最开始执行的,这个时候应该是没有$el,没有挂载,没有this的。所以这个时候就没有所谓的数据了,父组件子组件都没有。但是很多时候我们要在这里面操作data。我们会传入一个vm来获取this,这个时候路由next里面的函数就要等到挂载完成以后才会执行。如果不传入vm这时候beforeRouterEnter是最先执行的。
beforeRouterEnter(to,from,next){
next(vm=>{
//自己的代码
})
}
router拦截器
登录拦截逻辑
第一步:路由拦截
首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录。如果用户已经登录,则顺利进入路由,
否则就进入登录页面。在路由管理页面添加meta字段
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const routes = [
{
path: '/',
name: "欢迎",
meta: {
requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的
},
component: resolve => require(["../components/Hello.vue"], resolve)
},
{
path: '/login',
name: "登录",
/*meta: {
requireAuth: false, // 添加该字段,表示进入这个路由是需要登录的
},*/
component: resolve => require(["../view/login/login.vue"], resolve)
}
]
export default new Router({
base: "/",
routes
})
定义完路由后,我们主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断。。所以在main.js加上
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if (store.state.token) { // 通过vuex state获取当前的token是否存在
next();
}
else {
next({
path: '/login',
query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由
})
}
}
else {
next();
}
})
每个钩子方法接收三个参数:
* to: Route: 即将要进入的目标 路由对象
* from: Route: 当前导航正要离开的路由
* next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
* next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
* next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
* next(‘/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。
确保要调用 next 方法,否则钩子就不会被 resolved。
其中,to.meta中是我们自定义的数据,其中就包括我们刚刚定义的requireAuth字段。通过这个字段来判断该路由是否需要登录权限。需要的话,同时当前应用不存在token,则跳转到登录页面,进行登录。登录成功后跳转到目标路由。
完成后,我们可以在登录页面。控制用户登录成功后,vuex的token状态改变就可以了
export default {
methods:{
login(){
this.$store.commit('setToken','true'); //改变token状态
let redirect = decodeURIComponent(this.$route.query.redirect || '/'); 获取登录成功后要跳转的路由。
this.$router.push({
path: redirect
})
}
}
}
axios拦截器
service.interceptors.request.use(config => {
//发送请求时拦截
}, error => { //请求错误处理
app.$vux.toast.show({
type: 'warn',
text: error
});
Promise.reject(error)
});
service.interceptors.response.use(
response => {
//返回拦截
error => { //响应错误处理
}
);
vue环境配置,开发、正式、测试在有些情况下需要分别配置,可减少很多每次打包操作,操作如下
想实现通过不同的命令,打包调用不同环境的API,实现实现前端自动化部署。
前端自动化部署工程比较复杂,这里只介绍通过不同的命令,打包的时候调用不同环境的API,
例如:
npm run build 调用开发环境接口,打包开发环境
npm run build:test 调用测试环境接口,打包测试环境
npm run build:prod 调用生产环境接口,打包生产环境
vue项目用vue-cli脚手架安装完成之后,生成的项目中会有build,config这两个文件夹
1、在build文件下新建webpack.test.conf.js
在build文件下新建webpack.test.conf.js,将webpack.prod.conf.js内容复制过来。
修改webpack.test.conf.js文件
将const env = require('../config/prod.env');
修改为:const env = require('../config/test.env');
2、在config文件下新建test.env.js
在config文件下新建test.env.js,将prod.env.js内容复制过来;
分别在dev.env.js,test.env.js,prod.env.js中定义变量API_ROOT,
dev.env.js
test.env.js
prod.env.js
3、在build文件下新建test.js
把build.js 内容复制到test.js
将
constwebpackConfig =require('./webpack.prod.conf')
修改为:
constwebpackConfig =require('./webpack.test.conf')
4、修改package.json
配置axios请求的时候,接口地址直接调用 process.env.API_ROOT 就好了,
打包的时候执行 npm run build:test就是调用的测试接口地址
vue组件懒加载
链接:https://www.cnblogs.com/zhanyishu/p/6587571.html
vue权限控制
链接:https://mp.weixin.qq.com/s/frAxVsMwpIHDVel_98GC5A
vue-cli3.0配置
链接:https://www.cnblogs.com/sinosaurus/p/10294399.html
vue配置开发,测试,生产环境api
链接:https://segmentfault.com/a/1190000016664571?tdsourcetag=s_pctim_aiomsg