设置跳转路由
通过添加监听 仔方法里设置下面的语句
this.$router.push("/home"); //有浏览记录 this.$router.replace("/home");//无浏览记录 如果跳转到相同路由会报错的 下面这样就没事了 this.$router.replace("/home").catch(err => err);
动态路由
配置路由
{ path: '/use/:name1', component: use }, <router-link :to="'/use/'+name1">use</router-link>
小知识
$routers 是路由
$route 是当前正用的路由
this.$route.params.name1;
通过这个可以得到自定义的路由name1
路由的懒加载
用到的时候才会调用
const about=()=>import("../components/about.vue")
路由的嵌套
将模板引入这个路由index文件
const newabout=()=>import("../components/newabout.vue")
定义路由 //children 里面子路由的path不用加”/” 否则渲染不上去
{ path: '/about', component: about, children:[ { path:"newabout", //不是"/newabout" component:newabout }, { path:"newhome", component:newhome } ] },
使用路由 //一定要写全路由格式
<router-link to="/about/newhome">newabout</router-link>
路由传参
调用路由语句
<router-link :to="{path:'/profile',query:{age:1}}">档案</router-link>
router-link标签中的to属性 设置为动态监听： 然后里面的东西改为json类型数据
其中query属性里面传的就是参数 /profile?age=1
得到传的结果
$route.query.age
js传参
dianji(){ this.$router.push({ path:"/profile", query:{ name11:"wangzhaoyang" } }).catch(err => err); }
路由守卫（路由钩子）
全局守卫（钩子）
//全局守卫 //前置钩子 Router1.beforeEach(function(to,from,next){ document.title=to.meta.title; //这里meta是理由一里面的元数据 数据的话可以定义在这里 console.log(to); next(); }) //后置钩子 没有next 不用主动进行next函数 Router1.afterEach(function(to,from){ console.log("!"); })
2.局部守卫（钩子）
beforeEnter:function(to,from,next){ console.log("我是子路由进来了"); next(); }
定义在路由里面 监听这一个路由 有多种守卫
next() 函数里面可以定义路由 可以定义json类型的路有数据路径啦啥的
keep-live 遇见vue-router 路由缓存
先将含有子路由的组件用 keep-live标签包裹住vue-router
<keep-alive> <router-view></router-view> </keep-alive>
通过建立data 数据保存 路由
data(){ return { path:"/about/newabout" } },
通过这两个 函数调用
activated(){ //这行语句是防止路由重读加载报错 if (this.path === this.$route.path) return; this.$router.push(this.path); console.log("huoyue"); }, beforeRouteLeave(to,from,next){ this.path=this.$route.path; next(); }
坑 这俩函数必须被 keep-live标签包裹才能使用
！！！注意包裹的是他上一级路由的 要不不能使用
deactivated(){ }, activated(){ },
include exclude
<keep-alive include="wa,name1"> <router-view></router-view> </keep-alive>
Promise
其中resolve是将数据传给下一个then函数 reject的话直接将数据传给最后的错误处理函数
多个路由都需要的话 那么promise.all函数 其中then中接受的参数是数组 第一个数据是第一个写的resolve函数的数据
Vuex
npm install vuex 直接安装最新的不用顾忌版本问题
使用
Vue.use(Vuex) //安装插件 const store=new Vuex.Store({ //跟data数据一样 state:{ counter:100 }, //跟方法一样 mutations:{ increment(state,jieshow){ //通过这样设置 就可以接受参数了 state.counter+=jieshow; } }, // action是处理异步的mutations 用来放一些请求或者异步操作 actions:{ }, //跟计算方法一样 getters:{ powercount(state){ return function(age){ return age }; } }, //这里可以以json的形式保存以上各种形式 将上面的东西模块化了 modules:{ } }) export default store
渲染进 main.js 函数里面
new Vue({ el: '#app', store, //通过组件渲染进Vue全局里面这样就可以全局使用 components: { App }, template: '' })
3.
使用mutations this.$store.commit("increment",13); //第二个值为参数 特殊的提交风格
使用getters //相当于计算方法 $store.getters.powercount(12) //这样写就可以传参数了 getters:{ powercount(state){ return function(age){ //通过这样设置 就可以接受参数了 return age }; } }
action的使用方法
modules
mutation使用
Axios
csdn 最全的讲解
axios详解_Hello Simon的博客-CSDN博客
1.基本实现方法
//1.执行GET请求 import axios from 'axios' axios.get('/user?ID=12345') //返回的是一个Promise .then(res=>console.log(res)) .catch(err=>console.log(err)); //2.可配置参数的方式 axios.get('/user',{ params:{ ID:12345 } }).then(res=>console.log(res)) .catch(err=>console.log(err));
2.并发方法 加上
//发送多个请求(并发请求)，类似于promise.all，若一个请求出错，那就会停止请求 const get1 = axios.get('/user/12345'); const get2 = axios.get('/user/12345/permission'); axios.all([get1,get2]) .then(axios.spread((res1,res2)=>{ console.log(res1,res2); })) .catch(err=>console.log(err)) axios.spread /可以将数据结构为res1 ,res2 axios.spread((res1,res2)=>{ console.log(res1,res2);})
3.可用axios,create([config])来创建一个新的实例，并设置相关属性
const instance = axios.create({ baseURL: 'http://localhost:3000/api/products', timeout: 1000, headers: {'X-Custom-Header':'foobar'} }); //instance的使用 instance.get('/user',{ params:{ID:12345} }).then(res=>console.log(res)) .catch(err=>console.log(err))
拦截器interceptors
//添加一个请求拦截器 axios.interceptors.request.use(config=>{ //在请求之前做一些事 return config; //！！！！！！必须return要不报错 },err=>{ //请求错误的时候做一些事 return Promise.reject(err); }); //添加一个响应拦截器 axios.interceptors.response.use(response=>{ //对返回的数据做一些处理 reutrn response; //！！！！！！必须return要不报错 },err=>{ //对返回的错误做一些处理 return Promise.reject(err); });
