[英]dynamically changing "to" attribute In router-link vue
I am new to Vue and straggling with generating sidebar list where each list element on click open its components.我是 Vue 的新手,并且在生成侧边栏列表时遇到了麻烦,其中单击的每个列表元素都会打开其组件。 I am using vue router.
我正在使用 vue 路由器。 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.当我将我的路径直接作为字符串 (:to="/zup" or:to="/reg") 时,它正在工作,但我希望这些路径是根据我单击的列表元素动态生成的。
Here's how I do it.我是这样做的。 Try extracting the v-for on the level above.
尝试在上面的级别上提取 v-for。 If you don't want to use an actual element, try
<template>
如果您不想使用实际元素,请尝试
<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'}"
编辑,并将您的
to=""
格式正确设置为:to="{name: 'namehere'}"
how about this solution with a switch
and a programmatic router change这个带有
switch
和程序化路由器更改的解决方案怎么样
<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>
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.
我没有找到从一个数据文件和 router-lik:to path 属性分别循环来自一个数据文件的 navbar 元素的解决方案。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.