vue-router传参页面数据不刷新

vue-router通过传递props参数复用同一个view。

const routes = [
  {
    path: '/books/received',
    name: 'BooksReceived',
    props: { type: -1 },
    component: Books,
  },
  {
    path: '/books/sent',
    name: 'BooksSent',
    props: { type: +1 },
    component: Books,
  },
];

发现访问不同的链接，页面不刷新。最终通过watch()方法重新加载解决。

export default {
  name: 'Books',
  data() {
    return { books: [] };
  },
  props: { type: { type: Number } },
  methods: {
    async getBooks() {
      await new Promise((resolve) => {
        setTimeout(() => {
          resolve();
        }, 0);
      });
      return this.type === 1 ? ['Book1', 'Book2'] : ['Book3', 'Book4'];
    },
  },
  beforeMount() {
    this.getBooks();
  },
  watch: {
    type() {
      this.getBooks();
    },
  },
};

以上为样例代码已删除业务逻辑，未经验证，仅供参考思路。