时间戳

首页 > 解决方案 > 使用 Vue JS 从不同的路由发送 props 到同一个组件

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

问题描述

我正在使用 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>动态的，具体取决于您所在的路线，因此它可以加载到不同的菜单项中。

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

标签： javascriptvue.jsroutescomponents

解决方案

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

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了解详情

根据评论编辑

我认为你仍然应该使用 Programmatic Navigation with

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在路线定义中设置！

推荐阅读