无效的监视来源：“ $ route” vuejs

问题描述

我有一个Vue组件，该组件曾经与$route上的观察者一起使用。
由于我做了一些升级，所以它不再起作用了，我收到消息：

[Vue警告]：无效的监视来源：“ $ route”。监视源只能是getter / effect函数，ref，反应性对象或这些类型的数组。

这是我的package.json：

{
    "name": "prix-de-gros.vue","version": "0.1.0","private": true,"scripts": {
        "serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint"
    },"dependencies": {
        "@vue/composition-api": "0.6.6","axios": "^0.19.2","chart.js": "^2.9.3","core-js": "^3.6.5","moment": "^2.27.0","regenerator-runtime": "^0.13.7","remove": "^0.1.5","slugify": "^1.4.5","tiptap-vuetify": "^2.24.0","vue": "^2.6.12","vue-i18n": "^8.21.0","vue-router": "^3.4.3","vuetify": "^2.3.9","vuex": "^3.5.1","webpack": "^4.44.1"
    },"devDependencies": {
        "@mdi/js": "^5.5.55","@vue/cli-plugin-babel": "^4.5.4","@vue/cli-plugin-eslint": "^4.5.4","@vue/cli-plugin-router": "^4.5.4","@vue/cli-plugin-vuex": "^4.5.4","@vue/cli-service": "^4.5.4","@vue/eslint-config-prettier": "^6.0.0","babel-eslint": "^10.1.0","eslint": "^7.7.0","eslint-plugin-prettier": "^3.1.4","eslint-plugin-vue": "^6.2.2","moment-locales-webpack-plugin": "^1.2.0","prettier": "^2.1.0","sass": "^1.26.10","sass-loader": "^9.0.3","vue-cli-plugin-vuetify": "^2.0.7","vue-template-compiler": "^2.6.12","vuetify-loader": "^1.6.0"
    },"resolutions": {
        "prosemirror-model": "^1.11.0","prosemirror-tables": "^0.9.0"
    }
}

和我的Vue组件（带有@vue/composition-api的Vue 2）：

<template>
  <div class="container">
    <v-card>
      <v-toolbar dark color="primary" dense class="mb-2">
        <v-btn text @click="goToRoute({ name: 'account' })">{{ $tc("Account",2) }}</v-btn>
        {{formatInt( data.id) }} - {{ data.label }}
        <v-spacer></v-spacer>
        <v-btn
          v-if="data.editable"
          :aria-label="$tc('Update')"
          icon
          @click="
            goToRoute({
              name: 'account-update',params: { id: data.id }
            })
          "
        >
          <v-icon aria-hidden="true">{{ mdiPencil }}</v-icon>
        </v-btn>
      </v-toolbar>

      <v-card-text>
        <v-row dense>
          <v-col cols="12" sm="3" class="label-col">{{ $tc("Account") }}</v-col>
          <v-col>{{ formatInt(data.id) }}</v-col>
        </v-row>
        <v-row dense>
          <v-col cols="12" sm="3" class="label-col">{{ $tc("Label") }}</v-col>
          <v-col>{{ data.label }}</v-col>
        </v-row>
        <v-row dense class="my-4">
          <v-col cols="12" sm="3" class="label-col">{{ $tc("Status") }}</v-col>
          <v-col>{{ data.status ? $tc("On") : $tc("Off") }}</v-col>
        </v-row>
        <v-row v-if="data.info" dense>
          <v-col cols="12" sm="3" class="label-col">{{ $tc("Info") }}</v-col>
          <v-col v-html="nl2br(data.info)"></v-col>
        </v-row>
      </v-card-text>
    </v-card>
  </div>
</template>

<script>
import axios from "axios";
import { mdiPencil } from "@mdi/js";
import { formatInt,nl2br } from "@/plugins/ob-helper";
import { ref,watch } from "@vue/composition-api";

export default {
  name: "AccountView",setup(props,{ root: { $i18n,$router,$i18nRoute,$route } }) {
    const data = ref({});

    function dataGet() {
      axios
        .get("/backend/accounts/" + $route.params.id)
        .then(r => {
          if (r.data) {
            data.value = r.data.data;
            document.title = $i18n.tc("Account",2) + " : " + data.value.id;
          }
        })
        .catch(error => {
          if (error.response.status !== 400 && error.response.status !== 401) {
            alert(error.response.statusText);
          }
        });
    }

    function goToRoute(o) {
      $router.push($i18nRoute(o));
    }

  watch("$route",() => dataGet());

    return {
      data,formatInt,goToRoute,mdiPencil,nl2br
    };
  }
};
</script>

解决方法

当反应性上下文对象被解构时，$route的反应性丢失（如@vue/composition-api Issue #264中所述）。 watch方法必须保留对反应性对象的引用以保持其反应性：

export default {
  // DON'T DO THIS
  // setup(props,{ root: { $route } }) {     // reactivity lost!

  // DON'T DO THIS
  // setup(props,context) {
  //   const { root: { $route } } = context   // reactivity lost!    
  // }

  setup(props,context) {
    // reactive!
    watch(() => context.root.$route,() => dataGet())
  }
}

demo

已通过@vue/composition-api 1.0.0-beta.11和Vue 2.6.11

验证 ,

您需要给watch对象一个对象，然后将要监视的对象命名为该对象的键。所以：

watch: {
  $route(to,from) {
  // react to route changes...
  }
}

查看此处：https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes

vue-composition-api vue.js