vue 里面子组件直接放到父组件的 template 里面，子组件路由是怎么传参的？

[movq]

我有一个父组件 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 是怎样才能传递进去呢？

[learnshare]

this.$route.params.id

v3
https://router.vuejs.org/zh/guide/#javascript
https://router.vuejs.org/zh/api/#%E8%B7%AF%E7%94%B1%E5%AF%B9%E8%B1%A1

v4
https://next.router.vuejs.org/zh/guide/#javascript

[movq]

@learnshare

this.$route.params.id 是在 B 组件里面获取 B 组件接受到的 id 这个参数。

我的问题是，如果 B 组件直接在 A 组件里面显示，这种显示方法并没有使用路由跳转，那么 B 组件里面的 this.$route.params.id 是怎么传进去的呢？还是说这种情况没有这个参数？

[learnshare]

@movq

v3
>通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由：

v4
>通过调用 app.use(router)，我们可以在任意组件中以 this.$router 的形式访问它，并且以 this.$route 的形式访问当前路由：

this.$route 代表的是当前路由（ URL 路径），与哪个组件没有关系。只要组件已经渲染（显示）在页面中，就可以访问它

[learnshare]

来一起学习 https://github.com/LearnShare/learn-VRA

[gouflv]

父子组件和路由没有半毛钱关系

[gouflv]

https://router.vuejs.org/guide/essentials/nested-routes.html

[lin07hui]

var app = new Vue({...})
app 里全部组件的 this.$router 都是同一个对象

[neutrino]

穿不进去的，你的 URL 里没有 B 只有 A ，也就没有 id

[gadfly3173]

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 传进去了

[IvanLi127]

给 <b /> 外面包个 <route-view> </route-view> ？

[94]

组件 A：
<template>

</template>

[94]

// 组件 A：
<template>
// 前后内容
<router-view></router-view>
</template>

// router.js
{
path: "/A_path",
name: "A",
children: [
{
path: "B_path/:id",
component: B,
},
],
},

其实就是组件套路由容器，让 router-view 做显示，就是正常的路由思路。

[tuutoo]

直接在 B 组件里添加一个属性 prop, 从父组件传过去吧