如何使用vue router改变轮播幻灯片？

Question

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

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

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

router/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');

如何使用vue router改变轮播幻灯片？

How to use Vue router to change carousel slides?

javascript

vue.js

vue-router

vue-component

vuejs2