如何使用Vue路由器更改轮播幻灯片？

Question

我是 Vue 初学者，我有一个问题：我有一个导航栏，我想要一些链接（如下所示的“Link2”）路由到同一个视图，但每个链接都有不同的值（1,2， 3)，这样我就可以构建一个根据所选选项更新的轮播。

我不想要link2/:opt这样的路由，因为我无法在页面中刷新，我只想将链接选项绑定到查看文件。

我试图通过在路由器中使用元标记来实现这一点，然后在导航栏中更新每个选项单击时的元标记。我的问题是我无法读取视图中元标记的更改。无论我选择什么选项，我总是得到 Link2 - option1。

路由器/index.js

{
  path: '/link2',
  name: 'link2',
  component: () => import('@/views/Link2.vue'),
  meta: { slide: '1' },
}

Navbar.vue：

methods: {

    goRoute: function(url, opt) {
        this.$route.meta.slide = opt;

        //value of opt is correct here(1,2,3)
        console.log(this.$route.meta.slide);

        this.$router.push(url).catch((error) => {
          if (error.name != 'NavigationDuplicated') {
            throw error;
           }
    });
}

Link2.vue - 我想读取每个选项的值：

<template>
   <h1 class="mt-12">Link2- option{{ slide }}</h1>
</template>

<script>
   export default {
      name: 'Link2',
      data() {
         return {
           slide: 0,
         };
       },

      watch: {
         '$route.meta.slide': function(newValue) {
              this.slide = newValue;
          },
      },

      created() {
          this.slide = this.$route.meta.slide;
      },
   };
</script>

我错过了什么？有没有更好的解决方案？ 提前致谢！

Answer 1

尽管不需要刷新，您也可以使用路由参数：

{
  path: '/link2/:opt',  // param called `opt`
  name: 'link2',
  component: () => import('@/views/Link2.vue'),
}

在$route 上使用watch 来确定何时更换幻灯片。它只会在您已经在查看组件并单击以更改（不是您第一次路由到组件时）触发，这就是您所说的。第一次，幻灯片将设置为 1，因为它在 data 中以这种方式初始化：

data() {
  return {
    slide: 1
  }
},
watch: {
  $route(to, from) {
    this.slide = Number(to.params.opt);
  }
}

例如，要转到第 2 张幻灯片，请使用 <router-link> 之类的：

<router-link to="/link2/2">Slide #2</router-link>

或以编程方式：

this.$router.push('/link2/2');