Javascript 使用Vue JS从不同路径向同一组件发送道具

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

我已经尝试将道具加载到模板中，效果很好。但是在html的同一部分中发送和替换prop值是我还没有弄明白的事情

{path:'/list'，组件：list，道具：{url:'www.google.com'}

韦尔科姆
维特
东西
共同的
食物

应该是动态的，这取决于您选择的路线，因此它可以加载到不同的菜单项中

---

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

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

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>

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

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

const User={
道具：['id']，
模板：“用户{{id}}”
} 
常量路由器=新的VueRouter（{
路线：[
{path:'/user/:id'，component:user，props:true}
] 
})

---

只需记住在路线定义中设置

props:true

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

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>

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

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

const User={
道具：['id']，
模板：“用户{{id}}”
} 
常量路由器=新的VueRouter（{
路线：[
{path:'/user/:id'，component:user，props:true}
] 
})

---

只需记住在路线定义中设置

props:true

您可以使用路由中的参数作为组件中的道具，并使用观察者对路由更改做出反应。您可以使用状态系统（vuex）访问有关参数的特定数据，也可以直接使用参数

使用：

router.push（{path:'/user/${userId}}）

然后

和/或

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

模板：“用户{{$route.params.id}”

您可以使用路由中的参数作为组件中的道具，并使用观察者对路由更改做出反应。您可以使用状态系统（vuex）访问有关参数的特定数据，也可以直接使用参数

使用：

router.push（{path:'/user/${userId}}）

然后

和/或

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

模板：“用户{{$route.params.id}”

您可能需要

Vuex

您可能需要

Vuex

我不确定，但我不认为这就是我的意思。我有一个名为

菜单

的模板（组件）。我只想为每个菜单使用一个组件。例如，“标题”菜单有两个链接。假设链接是食物和饮料。例如，如果我点击饮料。我希望应用程序打开完全相同的组件。但是在html的同一点上有两个不同的链接，例如苏打水和冰饮料。每个菜单都是如此。或者可能是这样：

js{path:'/food'，组件：菜单，道具：{url_1:'/cold_food'，url_1:'冷食'，url_2:'/warm_food'，url_2_name:'warm food'}{path:'/drinks'，组件：菜单，道具：{url_1:'/cold_drinks'，url_1:'冷饮'，url_2:'warm_drinks'，url_2:'暖饮'}

对不同的数据使用相同的变量道具我仍然不明白为什么要使用参数。链接应该根据您选择的路线而改变。但我不需要像你的例子中的id那样通过URL发送动态内容。我不确定，但我不认为这就是我的意思。我有一个名为

菜单

的模板（组件）。我只想为每个菜单使用一个组件。例如，“标题”菜单有两个链接。假设链接是食物和饮料。例如，如果我点击饮料。我希望应用程序打开完全相同的组件。但是在html的同一点上有两个不同的链接，例如苏打水和冰饮料。每个菜单都是如此。或者可能是这样：

js{path:'/food'，组件：菜单，道具：{url_1:'/cold_food'，url_1:'冷食'，url_2:'/warm_food'，url_2_name:'warm food'}{path:'/drinks'，组件：菜单，道具：{url_1:'/cold_drinks'，url_1:'冷饮'，url_2:'warm_drinks'，url_2:'暖饮'}

对不同的数据使用相同的变量道具我仍然不明白为什么要使用参数。链接应该根据您选择的路线而改变。但我不需要像您示例中的id那样通过URL发送动态内容。