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

Question

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

我已经尝试将 Prop 加载到模板中，效果很好。但是在 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 } })

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

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

只需记住在路由定义中设置props: true!