一、视图
<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;