vue 里面子组件直接放到父组件的 template 里面，子组件路由是怎么传参的？
movq · 2021-11-05 20:14:42 +08:00 · 1986 次点击这是一个创建于 1106 天前的主题，其中的信息可能已经有所发展或是发生改变。
我有一个父组件 A ，父组件里面的子组件 B 直接显示在父组件的 template 里面上：
A.vue：
<template>
...
...
<b/>
</template>
import B from B.vue
setup(){
components: {B}
}
在路由里面，是这么写的：
{
path: "/A_path",
name: "A",
components: {
header: Header,
main: A,
},
children: [{
path: "B_path/:id",
component: B,
},],
},
可以看到，在 B 的路由里面，有一个参数 id
但问题是，我的 B 直接在 A 组件下面显示了，那么这个 id 是怎样才能传递进去呢？
 |
1
learnshare 2021-11-05 20:21:59 +08:00
|
 |
2
movq OP @learnshare
this.$route.params.id 是在 B 组件里面获取 B 组件接受到的 id 这个参数。 我的问题是，如果 B 组件直接在 A 组件里面显示，这种显示方法并没有使用路由跳转，那么 B 组件里面的 this.$route.params.id 是怎么传进去的呢？还是说这种情况没有这个参数？ |
|
3
learnshare 2021-11-05 20:28:02 +08:00
@movq
v3 >通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由： v4 >通过调用 app.use(router)，我们可以在任意组件中以 this.$router 的形式访问它，并且以 this.$route 的形式访问当前路由： this.$route 代表的是当前路由（ URL 路径），与哪个组件没有关系。只要组件已经渲染（显示）在页面中，就可以访问它 |
|
4
learnshare 2021-11-05 20:31:12 +08:00
|
 |
5
gouflv 2021-11-05 22:44:42 +08:00 via iPhone  1
父子组件和路由没有半毛钱关系
|
|
6
gouflv 2021-11-05 22:47:42 +08:00 via iPhone
|
 |
7
lin07hui 2021-11-05 23:25:14 +08:00
var app = new Vue({...})
app 里全部组件的 this.$router 都是同一个对象 |
 |
8
neutrino 2021-11-06 01:15:50 +08:00 via Android
穿不进去的，你的 URL 里没有 B 只有 A ，也就没有 id
|
 |
9
gadfly3173 2021-11-06 03:15:50 +08:00
https://router.vuejs.org/zh/guide/essentials/passing-props.html#%E5%B8%83%E5%B0%94%E6%A8%A1%E5%BC%8F
声明 param 为 prop ，这样你就可以把它当成 prop 传进去了 |
 |
10
IvanLi127 2021-11-06 09:52:12 +08:00 via Android
给 <b /> 外面包个 <route-view> </route-view> ？
|
 |
11
dfkjgklfdjg 2021-11-06 09:58:34 +08:00
组件 A：
<template> </template> |
|
12
dfkjgklfdjg 2021-11-06 10:01:25 +08:00
// 组件 A：
<template> // 前后内容 <router-view></router-view> </template> // router.js { path: "/A_path", name: "A", children: [ { path: "B_path/:id", component: B, }, ], }, 其实就是组件套路由容器，让 router-view 做显示，就是正常的路由思路。 |
 |
13
tuutoo 2021-11-08 08:54:21 +08:00 via Android
直接在 B 组件里添加一个属性 prop, 从父组件传过去吧
|
Select Language