Question

我有一个应用程序，其中包含此div：

<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）。

但是，上面的解决方案不起作用，因为Vue实例未检测到router.currentRoute.path已更改（不是被动）。

从Vue实例中访问动态路由器数据的正确方法是什么？

Answer 1

通过router创建的new VueRouter对象不会被动，因为Vue无法知道观察和更新其范围之外的任何对象。

在router配置对象中传递Vue是允许观看当前路线的，但您需要通过this.$route引用它：

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

您还可以通过router访问整个this.$router对象，但其数据不是被动的。

Answer 2

我在Vue的documentation页面上发现，该页面使用观看动画过渡来跟踪路由器。不知道这是否是最佳做法，但是您可以使用to.path或from.path来获取路径。

// then, in the parent component,
// watch the `$route` to determine the transition to use
watch: {
  '$route' (to, from) {
    const toDepth = to.path.split('/').length
    const fromDepth = from.path.split('/').length
    this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
  }
}

为什么router.currentRoute.path没有被动？

2 个答案: