当前位置 博文首页 > 苦海：vue-router路由、mixin混入、vue-resource、axios、计算属
路由vue-router介绍:
// 1.前端路由核心：锚点值的改变，根据不同的锚点值，渲染指定dom位置的不同数据。
// 2.vue中，模板数据不是通过ajax请求的，而是调用函数获取到模板内容
// 3.vue-router使用方式：
// 1.下载路由组件 ： npm i vue-router -S
// 2.在路由router.js文件中引入vue-router组件 ： import Router from 'vue-router'-----（引入前确保引入：import Vue from 'vue'）
// 3.在路由router.js文件中安装插件,挂载属性 ：Vue.use(Router)
// 4.在路由router.js文件中创建路由对象，并配置路由规则后导出路由router.js文件：export default new Router({routers:[path:'/',name:'vue组件中配置属性name的值',component:导入的组件名]})
// 5.将路由router.js文件导入main.js文件中,并在vue实例中使用：new Vue({router,render: h => h(App)})，注意，在main.js 文件中接收router时，先导入router。
// 7.在app.vue中留坑，实现组件渲染：<router-view></router-view> 或者 <router-view/>
// 4.router-link的使用：
// <router-link :to="{name:'路由文件中路由name属性的值'}"></router-link> 或者 this.$router.push({path:''})-----路由跳转标签，相当于a标签，有name属性，改变锚点值，正常跳转，利于维护
// <router-link to='路径'>----------没有name属性，改变锚点值，不会正常跳转，后面必须是具体路径
// <router-link :to="{name:'music',query:{id:index}}"></router-link>-----router-link 中query:{id:index}是路径?后面传的参数，在跳转的新页面created属性中通过this.$router.query可以拿到值
// 编程式路由-----------通过js函数来实现页面的跳转
// this.$router.go(1)----------根据浏览器记录前进后退，-1表示上一次浏览记录，1表示下一次浏览记录
// this.$router.push('/url')----------直接跳转到某个页面显示
// this.$router.push({name:'路由配置中name属性的值'})
// this.$router.push({name:'music',query:{id:2,name:2},params:{name:3}})
// this.$router是具备功能的对象，而this.$route是不具备功能的，它支持只读。
// 重定向路由：{path:'/',redirect:'/home'}---这种不方便维护，我们还是给它加上name属性，便于后期维护：{path:'/',redirect:{name:'路由中name属性的值'}}
// 404页面处理：当输入的地址找不到时，这时可以在路由处理的最后一个配置{path:'*',component:引入的404页面组件}
// 多视图路由----------此时在一个跟元素里面可以放多个坑，在路由文件配置中component变成components并且后面接的是一个对象，对象里面是路由匹配的组件：
// <router-view name='naem1'>
// <router-view name='naem2'>
// <router-view> --------------------{naem:'head',path:'/',components:{name1:对应组件,name2:对应组件,default:对应组件}},当留的坑里面没有设置name属性时，路由,components中配置名用default。
// 嵌套路由---------路由嵌套路由，用单页应用实现多页应用，在一个引入的组件中继续留坑引入组件，页面中只有子组件发生变化：
// 视图包含视图：
// <router-link :to="{name:'homemusic'}">音乐</router-link>
// <router-link :to="{name:'homemovie'}">电影</router-link><hr>
// <router-view></router-view>
// 父子级关系路由：
// {
// name:'homepage',
// path:'/homepage',
// component:HomePage,//要渲染的父组件
// children:[//父组件中包含的子组件用children:[]属性，具体参考案例vuetest
// { name: 'homemusic', path: 'testmusici', component: Tmu },
// { name: 'homemovie', path: 'testmovie', component: Tmo }
// ]
// }
// 动态路由匹配----------路由冒号后面的路由是动态变化，不同的界面路由不同。
// 命名路由和命名视图
// 命名路由：------给路由定义不同的名字，根据名字进行匹配
// 命名视图：------给不同的router-view定义名字，通过名字进行对应组件的渲染
// 1.安装：
// 1.直接下载：查看dist目录，dist目录下的文件是最新稳定版，不会同步更新到dev分支上的最新代码。
// 2.CDN：引用网络资源。
// 3.npm安装:npm install vue-router
// 2.使用：var Vue = require('vue)
// var VueRouter = require('vue-router) 或者 import VueRouter from 'vue-router'
// Vue.use(VueRouter)
// 3.前端路由和后端路由是不一样的。
// 前端路由：路由地址是根据不同的URL地址展现不同的内容和页面，在做单页面应用，大部分页面结构不变，只改变部分内容的使用前端路由。优点：用户体验好，速度快。缺点：不利于SEO，没有合理利用缓存，单页面无法记住之前滚动的位置
原生路由实现原理：
<body>
<div id="content"></div>
<script type="text/javascript">
//监视锚点值的改变做出匹配并设置内容到对应的元素：
window.addEventListener('hashchange', function() {
var text = '';
switch (location.hash) {
case '':
text = '主页';
break;
case '#/movie':
text = '电影页面';
break;
}
document.getElementById('content').innerHTML = text;
})
</script>
</body>
混入：
混入定义了一部分可复用的方法或计算属性，混入对象可以包含任意组件选项。组件使用混入对象后，该组件将可以使用混入对象的方法或属性，如：
<script>
// 1.定义一个混入对象：
var myMixin = {
data: {
sayhello: 'hello'
},
methods: {
say() {
console.log($this.data.sayhello);
}
}
};
// 2.使用extend方法继承这个混入对象：
var Component = Vue.extend({
mixins: [myMixin] //mixins 用来混入一个混入对象
});
//3.实例化一个组件:
var mycom = new Component();
//4.在另一个实例中使用myMixin:
var vm = new Vue({
mxins: [myMixin],
data: {
names: 'jack'
}
});
</script>
vue-resource简介：
// 1.Vue-resource和jQuery中ajax一样，是一个异步请求插件，官方已经停止维护了，尤雨溪推荐使用axios,vue-resource使用步骤：
// 1.引用文件：网络文件：<script src='https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js'></script> 或者 下载到本地：<script src='vue-resource.min.js'></script> 或者 npm install vue-resource --save（推荐）
// 2.引入：import VueResource from 'vue-resource'
// 3.挂载使用vue-resource： Vue.use(VueResource) ,确保引入vue和app.vue的情况下。
// 2.vue-resource的请求API是按照REST风格设计的，它提供了7种请求API：
// 1.get(url,[options])
// 2.head(url,[options])
// 3.delete(url,[options])
// 4.jsonp(url,[body],[options])
// 5.post(url,[body],[options])
// 6.put(url,[body],[options])
// 7.patch(url,[body],[options])
//全局拦截器 interceptors:-------如果一个页面中有多个请求，此时需要做一个loading效果，这时可以使用interceptors做统一处理。
Vue.http.interceptors.push((request,next)=> {
// 请求发送前处理逻辑：
next((response) =>{
// 请求发送后处理逻辑：
// 根据请求状态，response参数会返回给successCallback或errorCallback
return response
})
})
//实例：注意引入vue和vue-resource：
<body>
<div id="box">
<input type="button" @click="get()" value="获取数据">
</div>
<script>
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{},
methods:{
get:function(){
//发送get请求
this.$http.get('/try/ajax/ajax_info.txt').then(function(res){
console.log(res.body);
},function(){
console.log('请求失败处理');
});
}
}
});
}
</script>
</body>
axios(ajax)插件介绍：
// 1.axios插件：--------也是异步请求插件，跨三端的框架，使用步骤：
// 1.引用文件：网络文件：<script src='https://unpkg.com/axios/dist/axios.min.js'></script> 或者 npm install axios --save（推荐）
// 2.引入：import Axios from 'axios' ,确保vue和app.vue的引入。
// 3.给Vue原型挂载axios属性： Vue.prototype.$axios = Axios;当然axios是直接暴露在root的，直接可以使用axios.API使用。
// 4.提供的API：
// 1.$axios.request(options)
// 2.$axios.get(url[,options])
// 3.$axios.delete(url[,options])
// 4.$axios.head(url[,options])
// 5.$axios.options(url[,options])
// 6.$axios.post(url[,data[,options]])
// 7.$axios.put(url[,data[,options]])
// 8.$axios.natch(url[,options])
// 2.合并请求：this.$axios.all([请求1，请求2])--------将两个请求合并发送，只要有一个失败，就算失败，全体成功才算成功，这里的请求并非路径，而是通过this.$axios.post或者get的方式请求。
// 3.axios()中传递对象配置进行请求：
axios({
method:'post',
url:'url',
data:{
key1:value1,
key2:value2
}
});
// 4.拦截器：过滤，在一次请求中添油加醋：
// this.axios.interceptors.request.use(function(config){config.headers={}})
// 5.token类似cookie，且三端都可通用。
//实例：
<div id="app"></div>
<script>
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios//链式调用
.get('url')
.then(function(response){
console.log(response);
})
.catch(function (error) {
console.log(
