vue 学习总结(二) 视图、路由跳转、数据管理vueX、生命周期钩子函数

一、视图

<router-link to="/foo">Go to Foo</router-link>
<router-view/>

二、路由跳转

参考地址

1. router-link

2. this.$router.push() (浏览器前后切换，$route中存储的值还在，没有清空)

3. this.$router.replace() (用法同push)

4. this.$router.go(n)

ps : 区别

this.$router.push

跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面

this.$router.replace

跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)

三、生命周期钩子函数

beforeCreate	页面元素还未渲染,data数据还未监测到，计算、侦听、方法还未绑定
created	页面元素还未渲染，已完成(data数据还未监测到，计算、侦听、方法还未绑定）
beforeMount	实例挂载前，页面元素还未渲染
mounted	实例完成挂载，页面元素完成渲染
beforeUpdate	组件更新前，不要在此钩子中更改数据状态，会成死循环
updated	组件完成更新，不要在此钩子中更改数据状态，会成死循环
beforeDestory	销毁前，实例仍存在，方法属性可一使用，一般用来移除事件监听、定时器，避免内存泄露
destoryed	完成销毁，所有东西解绑`

 

 

 

 

 

 

 

 

 

 

四、路由守卫

参考地址

router.beforeEach((to,from,next)=>{   //进入路由前，全局前置守卫
});

next() 进入下一个组件的钩子函数
next(false) 阻止跳转 中断导航
next("/login") 进入指定的组件的钩子函数，meta传参数

{
      path: '/pagetwo',
      name: 'PageTwo',
      component: PageTwo,
      meta:{
        isLogin:"嘻嘻"
      }
}

router.afterEach((to, from) => { 全局后置守卫，没有next
  // ...
})

组件内守卫,通过next方法拿到实例数据，在钩子函数执行后触发

export default {
    name:"PageOne",
    data:function(){
        return{
            fName:"nihao",
            id:this.$route.query.id,
            num1:1
        }
    },
    beforeRouteEnter (to, from, next) {
        next(vm=>{
            console.log(vm)
        })
    },
}

beforeRouteLeave:(to,from,next)=>{}
//判断是否确认离开。确认执行next()；取消执行next(false)，留在当前页面

beforeEnter:(to,from,next)=>{}路由独享守卫

五、vueX

参考项目链接

参考博客

1.下载vuex

npm i vuex -s

2.在src下创建store文件夹，store添加index.js文件

import Vue from "vue";
import vuex from "vuex";
//挂载vuex
Vue.use(vuex)
//创建vuex对象
const store=new vuex.Store({
    store:{
        //管理的状态
        name:"pig",
        lang:'zh-cn'
    }
})

export default store;

3.将store挂载到项目vue实例上

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

4.使用

<p>语言{{$store.state.lang}}</p>
mounted(){
  console.log(this.$store)
},

import Vue from "vue";
import vuex from "vuex";
//挂载vuex
Vue.use(vuex)
//创建vuex对象
const store=new vuex.Store({
    state:{
        //管理的状态
        name:"pig",
        lang:'zh-cn'
    },
    getters:{
        getAll(state){
            return state.name+"-"+state.lang
        }
    },
    mutations:{
        changeLang(state,payload){
            // state.lang="en-us"+payload.str
            console.log(payload.str)
        },
        change(state,payload){
            console.log(payload.str)
        }
    },
    actions:{
        changeLang(context,payload){
            context.commit("changeLang",payload)
        },
        change(context,payload){
            context.commit("change",payload)
        }
    }

})

export default store;

调用action

this.$store.dispatch("changeLang",{str:"changeLang的参数"})

六、发送请求axios

参考链接
参考连接

/*
 * @Author: Mr_Wei
 * @Description: 配置拦截器
 * @Date: 09:51 2019/07/01
 * @Param: http.js
 * @return:
 **/ 

import axios from "axios";
import {Message} from "iview";
import wsmLoading from '@/myplugin/Loading';
import router from "./router";

// 请求拦截
axios.interceptors.request.use(config => {
    wsmLoading.startLoading("拼命加载中...");
    if(localStorage.jwtToken){
        config.headers.Authorization = localStorage.jwtToken;
    }else if(localStorage.adminToken){
        config.headers.Authorization = localStorage.adminToken;
    }

    return config;
}, error => {
    return Promise.reject(error);
});

// 响应拦截
axios.interceptors.response.use(response => {
    wsmLoading.endLoading();
    return response;
}, error => {
    wsmLoading.endLoading();
    const {status} = error.response;
    if(status == 401){
        localStorage.removeItem("jwtToken");
        localStorage.removeItem("adminToken");
        localStorage.removeItem("users");
        router.push("/login");
        Message.error({
            content:"密码失效,请重新登录",
            duration:2
        });
    }else{
        Message.error({
            content:error.response.data,
            duration:1
        })
    }
})

export default axios;