dynamically changing "to" attribute In router-link vue

Question

I am new to Vue and straggling with generating sidebar list where each list element on click open its components. I am using vue router. I understand the theory how it should work, but obviously I am missing something because I can't solve it. I don't know how to dynamically change the path.

I generated sidebar list using router-link

<template>
<div class="sidebarListItems">
    <router-link href="#" 
       :to="calcRut"
       class="list-group-item list-group-item-action bg-light"
       v-for="title in mapTitles" 
       :key="title.map" 
       :title="title.map"
       @click="callMap">
       {{title.map}} 
    </router-link>
</div>
 
</template>

<script>
import bus from "./js/bus"
import mapNames from "./json/popis_karata.json"

export default {
   
   name: "PageSidebarList",
   props: ["title"],

   data(){
       return {
           mapTitles:mapNames,
           ruth=""
       }
   },

   methods: {
        callMap(event){
          bus.$emit("openMap")
        },
        calcRuth(){
          for (var i=0; i<this.routes.length; i++){
          var newruth = this.routes[i].path 
          this.ruth = newruth
        }
    }
    },

    computed: {
      routes(){
      return this.$router.options.routes
      }
   }

When I put my path directly as a string (:to="/zup" or:to="/reg") it's working, but I would like that those paths are dynamically generated depending on which list element I clicked.

Answer 1

Here's how I do it. Try extracting the v-for on the level above. If you don't want to use an actual element, try <template>

<ul class="flex flex-col w-full space-y-1">
  <li v-for="item in items" :key="item.link">
    <router-link class="flex items-center h-8 px-4 rounded-lg hover:bg-white" :class="{ 'bg-white': routeMatches(item) }" :to="{ name: item.link }">
      <div class="text-sm text-gray-700">{{ item.name }}</div>
    </router-link>
  </li>
</ul>

Edit, also format your to="" correctly to be :to="{name: 'namehere'}"

Answer 2

how about this solution with a switch and a programmatic router change

<template>
  <div id="app">
    <ul class="nav">
      <li class="nav-item" @click="routeChanger('home')">Home</li>
      <li class="nav-item" @click="routeChanger('page1')">Page1</li>
      <li class="nav-item" @click="routeChanger('page2')">Page2</li>
      <li class="nav-item" @click="routeChanger('page3')">Page3</li>
      <li class="nav-item" @click="routeChanger('page4')">Page4</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    routeChanger(routeParam) {
      switch (routeParam) {
        case "home":
          this.$router.push("/home");
          break;
        case "page1":
          this.$router.push("/page1");
          break;

        //...
        default:
          this.$router.push("/404");
          break;
      }
    }
  }
};
</script>

<style>
</style>

Answer 3

Maybe my answer would be useful to someone so I am posting my solution. I didn't found solution to loop separately navbar elements from one data file and router-lik:to path attribute from routes file.

It work if I use routes file for everything.

<router-link
   v-for="route in $router.options.routes" 
   :key="route.path" 
   :to="route.path"
   class="list-group-item list-group-item-action bg-light">
   {{route.title}} 
</router-link>