（三）vue开发 - vue开发注意

1.如果需要使用

document.getElementById(“xxx”)

去获取Dom元素，不能给此元素设置v-if,否则获取不到会报错

2.如果使用到了echart并且在特定条件下需要隐藏echart，请默认设置echart为显示的，再让echart

display:none;

否则echart显示会变形

3.如果data里面有数组，并且在html模板里有此数组的遍历，请在data里给数组赋值 list:[], 否则会提示报错

export default {
    name: 'app',
    data () {
        return {
            list:[]
        }
    },
    mounted(){
    },
    methods: {
    }
}

4.使用vue传递的一个url ，例如

https://www.xxx.com/shop/#/auth?backurl=https://www.xxx.com/shop/#/success

其中backurl是参数名，https://www.xxx.com/shop/#/success是参数的值，但是这样取不到完整的backurl，会被#截断，取到的backurl的值为https://www.xxx.com/shop/，导致backurl打不开
解决办法：将#转义成 %23，也就是

https://www.xxx.com/shop/#/auth?backurl=https://www.xxx.com/shop/%23/success

最后取到的backurl的值为：backurl=https://www.xxx.com/shop/#/success
备注：试过vue的 mode:’history’,在开发环境下，这样设置的确能有效的解决问题，但是上了生产后，地址打开1404，经百度，需要服务端配置，但是服务端配置了，我试过在path前面加上目录名，也不行。
有更好的解决方式，请评论里告知。

5.vue中使用swiper垂直全屏滚动时，页面底部出现一大截空白

swiperOption: {
    direction: 'vertical',
    slidesPerView: 1,
    mousewheel: true,
    height: window.innerHeight   // 高度设置，占满设备高度
}

6.页面中登录表单输入用户名密码后，点击跳转到协议页面查看，然后返回登录页面时，表单中之前输入的值被清空，解决办法：在app.vue中给组件添加

app.vue

<template>
    <div id="app">
        <keep-alive><router-view /></keep-alive>
    </div>
</template>

这个方法会把所有的路由缓存起来，如果只想缓存指定的路由界面,可以这样做
/router/index.js

export default new Router({
    routes: [
        {
            path: '/',
            name: 'index',
            component: index,
            meta:{
               keepAlive:true
            }
        },
        {
            path: '/user',
            name: 'user',
            component: user,
            meta:{
               keepAlive:true
            }
        }]
})

app.vue

<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里是会被缓存的视图组件，比如 Home！ -->
    </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
<!-- 这里是不被缓存的视图组件，比如 Edit！ -->
</router-view>

7.使用keep-alive缓存组件后，created方法和mounted方法不会每次都执行，但是有些方法一定要每次进入页面都重新执行，可以监听路由变化：

watch: {
    '$route': function () {
        try{
            //TODO
        }catch(e){
            console.log(e)
        }
    }
},

或者将每次都要执行的方法放在activated方法里

activated: function () {
  // 每次都会执行
},

（三）vue开发 - vue开发注意

猜你喜欢