在数据中创建假 $route

Question

我正在尝试使用测试套件，并且在我的组件内部，我使用的是 Vue-Router，因此我的组件的 data() 内部有 $route 对象。

对于我的测试套件，我想伪造$route，这样我就可以在测试时访问组件内部的伪造值，而不是设置 Vue-Router。

当我尝试使用时

data() {
    return {
        $route: { fullPath: '/' },
        test: 'test'
    }
}

我无法使用this.$route 访问$route，但我可以访问this.test。我认为$ 标志是造成这种情况的原因。

有没有办法伪造 $route 并能够以this.$route 访问它？

Answer 1

见https://vuejs.org/v2/cookbook/adding-instance-properties.html

例如：

Vue.prototype.$route = { fullPath: '/' }

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
    {{message}}
    Faker Full Path: {{$route.fullPath}}
</div>