Question

我是Vue的新手，正在生成侧边栏列表，其中单击时每个列表元素都会打开其组件。我正在使用vue路由器。我了解该理论应该如何工作，但是很明显我错过了一些东西，因为我无法解决它。我不知道如何动态更改路径。

我使用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
      }
   }

当我将路径直接作为字符串（：to =“ / zup”或：to =“ / reg”）时，它可以工作，但是我希望这些路径是动态生成的，具体取决于我单击的列表元素。

Answer 1

这就是我的方法。尝试提取以上级别的v-for。如果您不想使用实际元素，请尝试<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>

编辑，并将您的to=""正确设置为:to="{name: 'namehere'}"

Answer 2

使用</p>和程序化路由器更改的此解决方案如何

switch

Answer 3

也许我的回答对某人有用，所以我发布了解决方案。我没有找到一种解决方案，可以将一个数据文件中的navbar元素和loop-lik属性分别路由到路由文件中。

如果我对所有内容都使用路由文件，则可以正常工作。

<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>

动态更改路由器链接vue中的“至”属性

3 个答案: