使用 Vue JS 从不同的路由发送 props 到同一个组件

Posted 2023-02-23

【中文标题】使用 Vue JS 从不同的路由发送 props 到同一个组件

【英文标题】：Sending props from different routes to the same component using Vue JS

【发布时间】：2020-01-07 11:52:42

【问题描述】：

我正在使用 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> 应该根据您所在的路线动态变化，因此它可以加载到不同的菜单项中。

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

【问题讨论】：

您可能需要Vuex

【参考方案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！

【讨论】：

我不确定，但我认为这不是我的意思。我有 1 个名为 menu 的模板（组件）。我只想为每个菜单使用那个组件。例如，主菜单有 2 个链接。假设链接是食物和饮料。例如，如果我点击饮料。我希望应用程序打开完全相同的组件。但是在 html 中的相同位置有 2 个不同的链接，例如苏打水和冰饮料。等等每个菜单。

或者这样：js path: '/food', component: Menu, props: url_1: '/cold_food', url_1_name: 'Cold Food', url_2: '/warm_food', url_2_name: 'Warm food' path: '/drinks', component: Menu, props: url_1: '/cold_drinks', url_1_name: 'Cold Drinks', url_2: '/warm_drinks', url_2_name: 'Warm drinks' 使用相同的变量道具和不同的数据

我还是不明白为什么要使用参数。链接应根据您所在的路线而变化。但我不需要通过您示例中的 id 之类的 url 发送动态内容。

【参考方案2】：

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

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

然后

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

和/或

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