Question

我在Vue中创建了一个已定义一个属性userCode的组件。我在html中写这个属性，如{{this.userCode}}，以确保属性传递正确。

  export default {
    components: {...},
    computed: {...},
    props: {
      userCode: {
        type: String,
        default: null
      }
    },
    methods: {
       getParam() {
          return {code: this.userCode, ...}
       }
    },
    ...,
    created() {
      this.$store.dispatch('domain/getAll', this.getParam());
  }

我在2条路线中使用这个组件，我在项目中定义了很多路线，所以我选择了相关的：

{
  path: '/user/aaa',
  name: 'users',
  component: userView,
  meta: {
    requiresLoggedIn: true,
  },
  props: {userCode: 'AAA'}
},
{
  path: '/user/bbb',
  name: 'users',
  component: userView,
  meta: {
    requiresLoggedIn: true,
  },
  props: {userCode: 'BBB'}
},

和html路线：

<router-link tag="li" to="/user/aaa" active-class="active"><a><span>Users AAA</span></a></router-link>
<router-link tag="li" to="/user/bbb" active-class="active"><a><span>Users BBB</span></a></router-link>

可以使用的代码只是'aaa'和'bbb'。

所以当我打开一些视图User aaa或User bbb第一次从服务器获取数据时，但是当我点击另一个用户视图时，不会获取数据。你能告诉我为什么吗？感谢。

Answer 1

问题是你的created挂钩只运行一次，在你的组件被渲染后，当你改变路径时它不会被调用（你可以通过在{{1}内添加记录器来检查它} hook，所以你会看到它会被记录一次）因此，当您更改路径时，您的组件已经在DOM中。

为了实现这一目标，您需要注意路由器的变化：

created

点击新路线

1 个答案: