vue项目中用到的知识点（一）

vue项目中用到的知识点

复制代码

路由搭建(在router/index目录下)

export default new Router({
  routes: [
    {
      path: '/',
      component: () => import('@/view/index/index'),
      name: 'index',
      meta: { title: '首页' }
    },
    {
      path: '/case',
      component: () => import('@/view/case/index'),
      name: 'case',
      meta: { title: '客户案例' }
    },
    {
      path: '/404',
      component: () => import('@/view/errorPage/404')
    },
    {
      path: '*',
      redirect: '/404'
    }
  ]复制代码

复制代码

创建路由拦截器,在src目录下创建permission.js(src/permission.js)

import router from './router'
router.beforeEach((to, from, next) => { // 路由加载开始
  next()
})

router.afterEach(() => { // 路由加载结束
})复制代码

复制代码

使用vuex的状态管理模式store(这里使用三个文件创建store)

1.创建一个主文件index.js(store/index)

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'
Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user
  },
  getters
})

export default store复制代码

2.创建一个文件getters.js(store/getters)

const getters = {
  mobile: state => state.user.mobile
}
export default getters复制代码

3.创建一个文件user.js(store/modules/user)

const user = {
    state: {
        mobile: false,
    },
  mutations: {
    SET_MOBILE: (state) => {
      state.mobile = true
    }
  },
  actions: {
    mobileFun ({ commit }) {
      return new Promise((resolve, reject) => {
        commit('SET_MOBILE')
        resolve('true')
      })
    }
  }
}复制代码

.复制代码

在组件中使用
import { mapGetters } from 'vuex'
computed: {
    ...mapGetters(['mobile'])
}
created () {
    this.mobile
}
复制代码

使用axios请求数据

1. 请求配置文件(新建src/utils/request.js),utils/request.js文件名可以自定义

import axios from 'axios'
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 15000 // 请求超时时间
})
service.interceptors.request.use(config => {
  // if (store.getters.token) {
  //   // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
  //   config.headers['token'] = getToken()
  // }
  return config
}, error => {
  Promise.reject(error)
})
service.interceptors.response.use(
  /**
   * 下面的注释为通过在response里，自定义code来标示请求状态
   * 当code返回如下情况则说明权限有问题，登出并返回到登录页
   * 如想通过xmlhttprequest来状态码标识 逻辑可写在下面error中
   * 以下代码均为样例，请结合自生需求加以修改，若不需要，则可删除
   */
  response => {
    // 处理网络错误
    if (response.status !== 200 && response.status !== 302) {
    }
    const res = response.data
    // 处理业务错误
    if (res.status !== 1) {
      // 登录过期 跳转到登录页面
      if (res.status === 110) {
        window.location.href = '/login'
      }

      return Promise.reject('error')
    } else {
      // console.log('没有异常,返回数据:', response.request.responseURL, res.data)
      return res.data
    }
  },
  error => {
    return Promise.reject(error)
  })

export default service
复制代码

创建完成以后，在api接口调用返回的.在目录文件下创建接口文件.复制代码

2. 创建接口文件(新建/src/api/api.js),api.js文件名可以自定义

在配置接口文件时，需要对请求接口路径进行处理.
在中
dev: {
    // 代理设置
    proxyTable: {
      '/api/logon': {
        target: 'http://121.xx.xx.xx', // 请求域名
        changeOrigin: true,
        secure: false
      }
    }
}复制代码

在的对应中的的路径.
配置了后,中的相当于.复制代码

import request from '@/utils/request'
export function LoginFun (query) {
  return request({
    url: `/api/logon/loginFun`, // 请求接口
    method: 'get',
    params: query // get请求
  })
}
export function LoginFun1 (params) {
  return request({
    url: `/api/logon/loginFun`, // 请求接口
    method: 'post',
    params // post请求
  })
}
复制代码

3. 1、2弄完后在组件中使用

import { LoginFun } from '@/api/api'
methods: {
    LoginFun() {
        LoginFun().then((res) => {
            console.log(res)
        }).catch((res) => {
            console.log(res)
        })
    }
}
复制代码

分割线

---

一个vue项目完上面基本算是配置完一个简单的项目，其它的可以按需求对应添加.
下面就是在项目遇到的一些解决问题方法.复制代码

一、父组件引入子组件(并相互传值)

1.新建子组件default.vue

子组件通过接收父组件传输过来的参数;子组件通过更新父组件绑定的数据,通过绑定父组件的事件.复制代码

export default {
    props: {
        childData: {
            required: true
        }
    },
    watch: {
        childData: {
            immediate: true,
            handler() {
                console.log(childData)
            }
          }
        }
    },
    methods: {
        clickFun () {
            this.$emit('update:parentData', '参数')
            this.$emit('childClick', '事件参数')
        }
    }
}复制代码

2.新建父组件index.vue

父组件通过传递参数的值给子组件;父组件通过给组件绑定一个事件.复制代码

<template>
    <div>
        <defaultWrap :childData.sync="parentData" @childClick="parentChild"></defaultWrap>
    </div>
</template>
<script>
import defaultWrap from './default'
export default {
    components: { defaultWrap },
    data: {
        return {
            parentData: ''
        }
    },
    methods: {
        parentChild () {}
    }
}
</script>
复制代码

二、vue两种跳转链接

1.使用router-link跳转页面

<router-link :to="{name: 'xxx/:id', query: {id: 1}, params: { id: 2}}"></router-link>
<router-link :to="{path: '/index', query: {id: 1}, params: { id: 2}}"></router-link>复制代码

2.使用通过事件跳转页面

this.route.push({name: 'xxx/:id', query: {id: 1}, params: { id: 2}})
this.route.push({path: '/index', query: {id: 1}, params: { id: 2}})
复制代码

三、路由改变时，内容刷新(一般解决query类型的传参)

在组件中使用
<router-link :to="{name: 'xxx/:id', query: {id: 1}}"></router-link>
需在的添加一个属性
1.router-view(:key='key')
2.computed: {
    key () {
        return this.$route.fullPath
    }
}
复制代码

四、使用axios上传文件

1.在添加属性
2.使用上传
const param = new FormData()
param.append('属性名', '属性')
复制代码

五、使用$nextTick

跟新完以后再执行复制代码

this.$nextTick(() => {
    console.log(123)
}复制代码

六、将方法添加到vue原型对象中使用

1.新建一个xxx.js

export default {
    funData: (res) => {
        return res
    }
}
复制代码

2.在mian.js中引入xxx.js

import { funData } from './utils/validate'
Vue.prototype.funData = funData
复制代码

3.在组件中使用

el-button(v-if="powerFun(39)")复制代码

七、使用Vue.set添加属性(属性在对象中未定义)

import Vue from 'vue'
Vue.set(this.form, '属性名', 属性值)
复制代码

转载于:https://juejin.im/post/5c78839ce51d453ed76826cf