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, '属性名', 属性值)
复制代码