爲什麼不是router.currentRoute.path反應？

我有被包含在這個div應用程序：爲什麼不是router.currentRoute.path反應？

<div id="app" v-bind:style='{backgroundColor: backgroundColor}'> 
    ... the app ... 
</div>

路由是繼完成example in the documentation（這是一個的WebPack項目）：

import Vue from 'vue/dist/vue.js' 
import VueRouter from 'vue-router' 
import ComponentOne from './component1.vue' 
import ComponentTwo from './component2.vue' 

Vue.use(VueRouter) 

const routes = [{ 
     path: '/foo', 
     component: ComponentOne 
    }, 
    { 
     path: '/bar', 
     component: ComponentTwo 
    } 
] 

const router = new VueRouter({ 
    routes // short for `routes: routes` 
}) 

const app = new Vue({ 
    router, 
    data: { 
     day: "Monday" 
    }, 
    computed: { 
     backgroundColor: function() { 
      console.log(JSON.stringify(router.currentRoute)) 
      if (router.currentRoute.path == "/foo") { 
       return "green" 
      } else { 
       return "blue" 
      } 
     } 
    } 
}).$mount('#app')

我想要的背景是依賴於當前路線（router.currentRoute.path）。

但是，上面的解決方案不起作用，因爲0123由於Vue實例未檢測到router.currentRoute.path已更改（未響應）。

從Vue實例內訪問動態路由器數據的正確方法是什麼？

來源

2017-07-26 WoJ

通過new VueRouter創建的router對象沒有反應，因爲Vue沒有辦法知道如何監視和更新其範圍之外的任何對象。

在Vue配置對象傳遞router是允許的電流路線觀看，但你需要通過this.$route引用它：

if (this.$route.path == "/foo") { 
    ... 
}

您還可以通過this.$router訪問整個router對象，但其數據不具反應性。

來源

2017-07-26 13:27:06 thanksd

我剛剛測試過（在'console.log（）'和'if'條件中都用'this。$ router'替換'router'），行爲是一樣的：router.currentRoute.path是路線改變後的初始設定後沒有更新。我將查看文檔以瞭解'$ router'表示法。 – WoJ

謝謝。我只是在輸入有關'this。$ route'的評論時正常工作（並通過鏈接到文檔更新了您的答案） – WoJ

很酷，是的，我沒有意識到'this。$ router'對象沒有被監視所有。很高興知道！ – thanksd

爲什麼不是router.currentRoute.path反應？

回答

相關問題