Question

我正在使用Vue JS构建菜单应用程序。有人告诉我，如果样式保持不变，则只需使用1个组件。因此，这意味着我必须使用动态数据。每个菜单/子菜单都有3到4个菜单链接。我一直在寻找一种将带有数据的变量发送到组件并提出“道具”的解决方案。但是我找不到一种方法，可以将道具从不同的路线发送到同一组件，并检查您在哪条路线上，以了解将哪些道具加载到html中。

我已经尝试将道具加载到模板中，并且工作正常。但是我还没有想到在html的同一部分中发送和替换prop值。

 { path: '/list', component: List, props: { url: 'www.google.com' } }

<template>
    <div class="container">
        <h1>Welkom</h1>
        <div class="row">
            <div class="col-md-6">
                <router-link to='/weed'>Wiet</router-link>
            </div>
            <div class="col-md-6">
                <router-link to='/stuff'>Stuff</router-link>
            </div>
            <div class="col-md-6">
                <router-link to='/joint'>Joint</router-link>
            </div>
            <div class="col-md-6">
                <router-link to='/edibles'>Edibles</router-link>
            </div>
        </div>
    </div>
</template>

<router-link>应该根据您所选择的路线而动态变化，以便可以在不同的菜单项中加载。

我想要一个菜单，该菜单根据您所在的路线在不同的路线链接中加载。

Answer 1

我认为您应该使用程序化导航和查询参数，例如

router.push({ path: 'register', query: { plan: 'private' } })

以便您的应用程序使用

<div class="col-md-6"
     @click="$router.push({ path: '/edibles',
             query: { url: 'www.google.com', other: 'etc' }})"
 >Edibles</div>

您可以使用模板中的$route.params.url和函数中的this.$route.params.url以及vue组件实例的计算属性和所有其他属性来访问导航组件中的这些查询参数。

还请查看https://router.vuejs.org/guide/essentials/navigation.html了解详情

根据评论编辑

我认为您仍应将程序导航与

一起使用

router.push({ name: 'user', params: { userId } })

提供的参数可以用作组件的道具，如下所示

    const User = {   
    props: ['id'],   
    template: '<div>User {{ id }}</div>' 
} 
const router = new VueRouter({   
    routes: [     
        { path: '/user/:id', component: User, props: true }      
    ] 
})

只记得在路由定义中设置props: true！

Answer 2

您可以将路线中的参数用作组件中的道具，并使用观察者对路线更改做出反应。要么有一个状态系统（vuex），您就可以使用它访问有关参数的特定数据，或者只是简单地使用这些参数。

使用：router.push({ path: '/user/${userId}' })

然后

watch: {
  $route(to, from) {
    // react somehow
  }
}

和/或

template: '<div>User {{ $route.params.id }}</div>'

使用Vue JS将道具从不同的路线发送到同一组件

2 个答案: