vue自记

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状态改变就可以了

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

你可能感兴趣的:(vue自记)