1. 程式人生 > >vue專案中的一些問題

vue專案中的一些問題

1、切換路由時根路由一直處於被啟用狀態

  解決辦法: 加exact屬性  <router-link to="/home" exact>首頁</router-link>

 如果需要進去首頁預設選中home,需要配置路由重定向

{
      path: '/',
      redirect: '/home'
}

2、改變了vuex裡面的資料以後檢視沒有及時更新

  解決辦法:如果這個資料是需要{{}}在行內渲染的,不要儲存在data的一個變數中進行使用,應該這麼寫

<dt>{{this.$store.state.homedataStore.cityinfo.name}}·初中&nbsp;&nbsp;
<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