Question

我在单个文件组件中使用Vue Multiselect库，并执行GET请求以填充Multiselect元素。当用户从列表中选择一个项目时，我需要将他带到新页面。多重选择中的事件处理程序会将NAS_ID附加到页面URL，就好像他在页面中选择了链接一样。

在进行本地测试时，效果很好。但是，在将代码部署到远程服务器后，页面将不会重定向用户。我可以在浏览器窗口中看到URL会更改，但是浏览器不会像在本地测试中那样重新加载。因此，我必须自己手动重新加载浏览器才能正常工作。

有人知道我该怎么做才能自动加载页面吗？

这是我的设置：

apiService.getAll()会像这样获取数据：

    [
  {
    "NAS_ID": 100010,
    "Name": "Aeration Basin",
    "Geometry Extracted": "S"
  },
  {
    "NAS_ID": 100202,
    "Name": "Aerial Farm",
    "Geometry Extracted": "P, S"
  }
]

组件TopicJump.vue：

<template>
  <multiselect 
    v-model='value' 
    :options='topics' 
    :loading='isLoading' 
    :selectLabel='selectLabel' 
    track-by='NAS_ID' 
    label='Name' 
    placeholder='Select or Search for a Topic' 
    class='multiselect' 
    @select='goToLink'> <--- HERE IS THE SELECT HANDLER
    <template slot='singleLabel' slot-scope='{ option }'>
      <strong>Jumping to {{ option.Name }}</strong>
    </template>
  </multiselect>
</template>

<script>
import Multiselect from "vue-multiselect";
import axios from "axios";
import apiService from "@/apiService.js";

export default {
  name: "TopicJump",
  components: { Multiselect },
  data() {
    return {
      value: null,
      topics: [],
      isLoading: true,
      selectLabel: ""
    };
  },
  created() {
    this.getTopics();
  },
  methods: {
    getTopics() {
      apiService
        .getAll()
        .then(response => {
          this.isLoading = false;
          this.topics = response.data;
        });
    },
    goToLink(option) {
      window.location.href =
        "https://example.com/#/content/" + `${option.NAS_ID}`;
    }
  }
};
</script>

Answer 1

原来，我需要向路由器视图组件添加一个密钥。

浏览器窗口不重新加载window.location吗？路由器问题？

1 个答案: