vue项目中的一些问题
1、切换路由时根路由一直处于被激活状态
解决办法: 加exact属性 <router-link to="/home" exact>首页</router-link>
如果需要进去首页默认选中home,需要配置路由重定向
{
path: '/',
redirect: '/home'
}
2、改变了vuex里面的数据以后视图没有及时更新
解决办法:如果这个数据是需要{{}}在行内渲染的,不要存储在data的一个变量中进行使用,应该这么写
<dt>{{this.$store.state.homedataStore.cityinfo.name}}·初中 <i>基本数据</i></dt>
3、this指向的问题可以通过箭头函数来解决,比如
myChart.on('click',(params)=>{
// console.log(this.$store.homedataStore)
if(params.data.name == '房山区' || params.data.name == '通州区'){
this.changecityinfo(params.data.name)
}
})
4、用watch监听数据,这个数据必须在data中声明
5、使用keep-alive选择性的缓存页面数据,可以再router里面的index.js中添加属性
{ path: '/e', name: 'Edu', component: Edu, meta: { keepAlive: true // 需要被缓存 } }, { path: '/an', name: 'An', component: A, meta: { keepAlive: true // 需要被缓存 } }, { path: '/test', name: 'Phs', component: Ph, meta: { keepAlive: true // 需要被缓存 } }, { path: '/', redirect: '/home' }
App.vue文件的写法如下:
<keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>
注意 : 必须在路由的index.js文件中使用router
Vue.use(Router)
6、遍历数组最好使用for循环,尽量不要使用for...in
7、
Cannot read property '__esModule' of undefined
组件加载编译问题,例如路由页面使用按需加载
resolve => require(['../components/404.vue'],resolve
没有加resolve