How to update component value after navbar link routing?

i'm a Vue beginner and i have a question. I have a navbar with several links, and one of those links has 3 options. I want that each of those options route to the same View(Link2) through (/link2) , but each one with a different value (1,2,3), so that i can then build a carousel in that View that updates according to those 3 options.

I don't want a route like link2/:opt, because i can't have a refresh in the page, i just want to bind the link option to a value in the view file.

I'm trying to achive that, by using a meta tag in the router, and then in the navbar update that meta tag on each option click. My problem is that i am not being able to read the changes in the meta tag in the View file. No matter what option i choose, i always get Link2- option1.

This is my router (index.js):

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

This is my navbar component function that fires on each option click (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;             }      });  }  

This is my Link2.vue View, where i want to read the value of each option:

<template>     <h1 class="mt-12">Link2- option</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>  

What am i missing? Is there a better solution for this? Thanks in advance!

https://stackoverflow.com/questions/66083898/how-to-update-component-value-after-navbar-link-routing February 07, 2021 at 10:04AM