vue

一、vue路由
创建router/index.js文件
main 页面引入：

import router from './router'
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
跳转：
第一种：
<1>未传参： this.$router.push({name: 'b', path: '/b'}) // 路由跳转
<2>传参： this.$router.push({name: 'b', path: '/b', params: {data: '这是参数'}})
B页面获取参数：this.$route.params.data
第二种：
<router-link to="/a">B页面，去A页面</router-link>

二、axios用法
第一种：
　　main.js引入axios
　　import Vue from 'vue'
　　import axios from 'axios'
　　import VueAxios from 'vue-axios'

　　Vue.use(VueAxios, axios)
　　页面应用
　　this.axios.get('/banner/bannerListData',{
　　　　params: {
　　　　　　id: 1
　　　　}
　　}).then((res) => {
　　　　console.log(res,777777777)
　　}).catch((err) => {
　　　　console.log(err,777777777) //错误处理 相当于error
　　})
第二种：
　　挂在原型链的方式：
　　再main.js(即入口)引入axios,挂载在vue原型下边
　　import axios from 'axios'
　　Vue.prototype.$axios = axios
　　页面应用
　　this.$axios.get('/banner/bannerListData', {
　　　　params: {

　　　　　　id：1

　　　　},
　　}).then(function(res) {
　　　　console.log(res)
　　}).catch(function(error) {
　　　　console.log(error) //错误处理 相当于error
　　})

二、axios用法
第一种：
　　main.js引入axios

　　import Vue from 'vue'
　　import axios from 'axios'
　　import VueAxios from 'vue-axios'

　　Vue.use(VueAxios, axios)

　　页面应用
　　this.axios.get('/banner/bannerListData',{
　　　　params: {
　　　　　　id: 1
　　　　}
　　}).then((res) => {
　　　　console.log(res,777777777)
　　}).catch((err) => {
　　　　console.log(err,777777777) //错误处理 相当于error
　　})
第二种：
　　挂在原型链的方式：
　　再main.js(即入口)引入axios,挂载在vue原型下边

　　import axios from 'axios'
　　Vue.prototype.$axios = axios

　　页面应用
　　this.$axios.get('/banner/bannerListData', {
　　　　params: {
　　　　　　id：1
　　　　},
　　}).then(function(res) {
　　　　console.log(res)
　　}).catch(function(error) {
　　　　console.log(error) //错误处理 相当于error
　　})

三、axios跨域解决

1、首先在main.js中，配置我们访问的url前缀：
axios.defaults.baseURL = '/app'
2、配置代理：
修改config文件夹下的index.js,在proxyTable中加上如下代码
proxyTable: {
　　'/api':{//此处并非一定和url一致。
　　　　target:'http://zhuofeidianzi.com/app',   //设置你调用的接口域名和端口号 别忘了加http
　　　　changeOrigin:true,//允许跨域
　　　　pathRewrite:{
　　　　　　'^/api': ''  //这里理解成用‘/api'代替target里面的地址，
　　　　}
　　}
},
3、修改请求url
配置之前
this.axios.get('http://zhuofeidianzi.com/app/banner/bannerListData',{
　　params: {

　　}
}).then((res) => {
　　console.log(res,777777777)
}).catch((err) => {
　　console.log(err,777777777) //错误处理 相当于error
})
修改为：
this.axios.get('/banner/bannerListData',{
　　params: {

　　}
}).then((res) => {
　　console.log(res,777777777)
}).catch((err) => {
　　console.log(err,777777777) //错误处理 相当于error
})
4、重启服务

参见：https://blog.csdn.net/yuanlaijike/article/details/80522621

https://www.cnblogs.com/cscredis/p/9286250.html

 

跨域成功，但是这只是开发环境（dev）中解决了跨域问题，生产环境中真正部署到服务器上如果是非同源还是存在跨域问题，

如我们部署的服务器端口是3001，需要前后端联调，第一步前端我们可以分生产production和开发development两种环境分别测试，

在config/dev.env.js和prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST，

开发环境中我们用上面配置的代理地址api，

生产环境下用正常的接口地址，所以这样配置，分别在config/dev.env.js和prod.env.js两个文件中进行以下配置。
config/dev.env.js：
module.exports = merge(prodEnv, {
　　NODE_ENV: '"development"',  //开发环境
　　API_HOST:"/api/"
})

prod.env.js
module.exports = {
　　NODE_ENV: '"production"',  //生产环境
　　API_HOST:'"http://10.1.5.11:8080/"'
}

四、父子组件获取属性及方法
<!-- 父组件 -->
 <div class="father">
      <button @click="getChild()">获取子组件的属性</button>: <span>{{name}}</span>
      <template>
        <cSonComponent ref="son"></cSonComponent>
      </template>
 </div>
 <script>
 /* eslint-disable */
 import cSonComponent from './c'
 export default{
   name: 'father',
   components:{
     cSonComponent,
   },
   data () {
     return {
       name: '',
       mess: '我是父组件里的数据'
     }
   },
   methds: {
     // 获取子组件的属性
     getChild() {
       console.log(this.$refs.son,'获取子组件属性')
       console.log(this.$refs.son.name,'获取子组件属性name')
       this.name = this.$refs.son.name
     },
     run() {
       alert('我是父组件里的方法')
     }
   }
 }
 </script>
<!-- 子组件 -->
<template>
  <div id=son"">
      <button @click="getParent()">点击获取父组件的属性和方法</button>: <span>{{msg}}</span>
  </div>
</template>
<script>
export default{
  name: 'son',
  data () {
    return {
      msg: '',
      name: '我是子组件c里的数据'
    }
  },
  methods:{
    // 获取父组件的属性及方法-->
    getParent() {
      console.log(this.$parent,'获取父组件的属性及方法')
      this.msg = this.$parent.mess // 获取父组件的属性
      this.$parent.run() // 获取父组件的方法
    }
  }
}
</script>