写vue项目 部分问题小总结
最近一直在写项目，遇到很多问题都没来得及总结。今天中秋节刚刚收假，这几天也没学习，所以先总结总结，再继续吧。
尽管项目还没写完，别人都开始准备复习，写简历什么的，有点慌。但是还是要稳住哇。一个萝卜一个坑吧，加油！
1.路由传参，刷新页面数据丢失
方法一：
路由传参跳转：
this.$router.push({
name: 'detail',
params: {
data: '要传输的数据'
}
})
另一个组件接收传过来的数据:
this.$route.params.data;
方法二：
路由传参跳转：
this.$router.push({
path: '/detail',
query: {
data: '要传输的数据'
}
})
另一个组件接收传过来的数据:
this.$route.query.data;
这两种方法都可以动态的去切换路由，同时传参
但是是有区别的：
- params 传的参数 当页面跳转之后，再回去数据会丢失，但是数据不会拼接在路由之后
- query 传的参数页面跳转刷新，原来的数据不会丢失，但是数据会拼接在路由之后，会暴露信息
但这只是通常情况，比如我在写项目时，发现两种方法页面刷新 数据都会丢失。所以解决方法是什么呢？
传参的时候使用JSON.stringify(data) 去将数据进行转换成JSON字符串，接收数据时使用JSON.Parse(data）再转换成JSON格式。
例如：
传参：handleToPay(){
this.$router.push({path:'/other_container/goods_pay',
query:{
pay_data:JSON.stringify(this.order_data),
}
})
},
接收：
data(){
return{
// 前面支付传过来的数据
last_data:JSON.parse(this.$route.query.pay_data),
}
},
2.页面请求携带token，设置请求头
这个问题可能很简单，但是还是遇到了一些问题。
例如： 把后台返回的token存在localStorage中，每次请求再取出来设置headers
- post请求设置方法：
this.$http.post('url',{
data:all_data
}, {
headers: {'Authorization':window.localStorage.getItem('token') }
} ).then(res=>{
console.log(res.data);
}).catch(res=>{
console.log(res);
});
- get / delete请求设置方法：
this.$http.delete('url', {
params: {}, 即使没有数据，也必须写这条，不然headers 设置无效
headers: {Authorization: window.localStorage.getItem('token') }
}).then(res => {
if (res.data.status === true) {
this.removeStorage();
}
}).catch(err => {
alert(err); //登录过期提示
});
虽然这种做法中规中矩，很保险。但每个请求都设置会很难受，重复写，所以可以设置全局的。
使用请求拦截器，可以全局设置，网上百度的方法，但是我自己使用过程中，可能是自身原因，并没有成功，但是可以放出来，参考一下：
全局设置 headers：
axios.interceptors.request.use(
config => {
let token = window.localStorage.getItem('token');
if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
config.headers.token = `${token}`;
}
return config;
},
err => {
return Promise.reject(err);
});
3.页面跳转及页面刷新
- 利用router-link来进行页面路由切换而跳转，通过不同的路由展示不同的组件，其原理是什么呢？
- vue-router路由的原理是通过改变网址,来实现页面的局部刷新,相比a标签跳转的不同之处在于,路由跳转不需要刷新整个页面。
- 随着 ajax 的流行，异步数据请求交互运行在不刷新浏览器的情况下进行。而异步交互体验的更高级版本就是 SPA —— 单页应用。
- 单页应用不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的，为了实现单页应用。
问题： 这虽然有良好用户体验，让用户无刷新，就能看到数据，仿佛减少了等待时间。
那需要页面刷新的部分该怎么办呢，这就是这块需要解决的问题。
目前我只接触了三种方法：
- window.location.reload();
这种方法页面会一瞬间的白屏，体验不是很好- this.router.go(0)
这种也是一样，画面一闪- provide / inject 组合 页面注入依赖
在App.vue,声明reload方法，控制router-view的显示或隐藏，从而控制页面的再次加载。
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view v-if="isRouterAlive"/>
</div>
</template>
<script>
export default {
name: 'App',
provide () {
return {
reload: this.reload
}
},
data(){
return{
isRouterAlive:true
}
},
methods:{
reload () {
this.isRouterAlive = false;
this.$nextTick(function () {
this.isRouterAlive = true;
})
}
}
}
</script>
在需要用到刷新的页面,在页面注入App.vue组件提供（provide）的 reload 依赖，直接this.reload()调用，即可刷新当前页面。
在需要刷新的页面引入依赖：inject: ['reload'],
在需要执行的地方直接调用方法即可：this.reload()。
子组件内注入依赖：
<template>
<div class="hello">
<h1>{{ count }}</h1>
<button @click="handleReload">刷新</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
inject: ['reload'],
data () {
return {
count: 0
}
},
created(){
this.countADD();
},
methods:{
countADD(){
setInterval(()=>{
this.count++;
},1000)
},
handleReload(){
this.reload();
}
}
}
</script>
上面是做了个简易计数器demo，进行刷新测试，看页面是否刷新,事实证明页面无刷新，达到了我们的目的。当刷新时，数据清零，但是页面无刷新。
image.png
4.vue数据已渲染完成，但是还有报错问题
1.问题：
后台返回的数据结构是一级对象嵌套二级对象，发现一级对象数据渲染不报错，二级数据渲染报错。
2.原因：
因为返回的数据是二层嵌套，但是在data中并没有去定义嵌套的二级对象
eg:
定义的data：
export default {
name: 'hello',
return{
orderDetails:null, //订单详情
}
}
返回的数据：
orderDetails: {
createTime: "2019-10-30T17:39:26"
orderId: "1189476896712798208"
orderStatus: 1
userId: 12
payData: [{
orderId: "1189476896712798208",
goodsId: 14,
goodsNum: 1
}]
}
因为初始赋值的orderDetails是null，初始渲染读取orderDetails.PayData当然是Cannot read property 'PayData' of null"，解决办法是，给orderDetails初始赋值{ }
3.解决代码：
1.在代码中加入判断
<template>
<div v-if="!loading">
<!----你的html代码------>
</div>
</template>
2.将一级对象定义成{ }，空对象，而不是null
export default {
name: 'detail',
data() {
return {
loading: false,
orderDetails:{},
}
}
}
5.使用UI组件
我了解过的组件有基础的 Mint-UI，mui，以及最好用的Element-UI。
ui组件的使用，减少了很多的工作，但是也会出现别的问题，比如组件的样式，组件有默认的样式，如果想要修改，则不能加scoped ，相当于全局样式都会改变，所以样式的优先级也会相应去改，才能实现，怎么说，使用方便，但是样式的改变，还需要全局考量。
以上是项目中遇到的一些小问题以及一些经验，当然除此之外，还有别的问题，只是还没找到好的解决方法，等后面解决了在总结吧。
