vue項目中的一些問題
阿新 • • 發佈:2018-11-05
面數據 配置路由 code 箭頭函數 遍歷數組 存儲 數組 com outer
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
vue項目中的一些問題