Question

尝试通过子组件设置<router-link :to="{nextPage}">的值以使路由器链接动态化。

我确实谈到过一些有关增加道具的研究，但是我不太确定该去哪儿。在<router-view :next-page="">中？

当我这样做时，我有两个问题：

问题1：已解决

问题2：错误消息“数据属性“ nextPage”已被声明为prop。请改为使用prop默认值。“

App.vue

<template>
  <div id="app">
    <router-view :nextPage="['/']"></router-view>

    <router-link class="prev-slide" :to="'/'">
      Restart
    </router-link>
    <router-link class="next-slide" :to="nextPage">
      Next
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nextPage: "/page2"
    };
  }
};
</script>

Welcome.vue

<script>
export default {
  name: "Welcome",
  props: ['nextPage'],
  data() {
    return {
      nextPage: "/page2"
    }
  }
};
</script>

Answer 1

您需要使用计算机。如果您对此一无所知；让我举一个例子：

new Vue({
  el: '#app',
  props: {
    current: {
      type: Number,
      default: 1
    }
  },
  computed: {
    next() {
      return this.current  + 1
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
{{current}}
|
{{next}}
</div>

如果您需要从路线获取当前页面：

new Vue({
  el: '#app',
  computed: {
    current() {
      return this.$route.params.page
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">{{current}}</div>

如何将nextPage变量值从子级传递到父级的路由器链接？

1 个答案: