vue3路由跳转传参子组件接收不到值

在Vue 3中，如果你想要通过路由跳转将参数传递给子组件并接收，可以使用`props`属性来进行数据的父子通信。首先，你需要在父组件的路由配置里传递参数：

// 父组件模板
<router-view :some-param="parentParam"></router-view>

// 父组件的data或methods中设置参数
export default {
  data() {
    return { parentParam: 'defaultValue' };
  },
}

然后，在子组件中接收这个参数：

// 子组件模板
<template>
  <div v-if="param">{{ param }}</div> <!-- 使用prop "param" 显示接收到的值 -->
</template>

<script>
import { ref } from 'vue';
export default {
  props: ['param'], // 接收从父组件传递过来的参数
  setup(props) {
    const param = ref(props.param); // 通过ref包裹props，便于计算和修改
    return { param };
  }
};
</script>

如果子组件没有显式地声明`props`，Vue会尝试将其作为响应式的`data`成员处理。但是，如果路由跳转时没有传递参数，子组件的`param`默认值将会是undefined。

相关问题

vue3路由跳转params传参接收不到？

在3 中，路由跳转传参的方式和 Vue2 有一些不同。你可以使用 `route.params` 获取参数，而不是像 Vue2 中使用 `$route.params`。

这里有一个简单的例子：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

const User = {
  template: `
    <div>
      <h2>User {{ $route.params.id }}</h2>
    </div>
  `
}

在这个例子中，我们定义了一个路由 `/user/:id`，它可以匹配 `/user/1`、`/user/2` 等等。当路由匹配成功时，组件 `User` 将被渲染，并且我们可以在组件中使用 `$route.params.id` 获取路由参数。

如果还有问题，请提供更多的代码和信息，我可以帮助你解决。

路由实现登录\注册\忘记密码页面切换，路由传参实现由登录页面跳转到忘记密码页面后将不为空的用户名显示在忘记密码页面

要实现登录、注册和忘记密码页面的切换，并在跳转到忘记密码页面时传递用户名参数，可以使用Vue Router来管理路由，并通过路由参数来传递数据。以下是一个简单的示例：

1. 首先，确保已经安装了Vue和Vue Router，并导入相关模块：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

2. 创建路由实例并定义路由：

const router = new VueRouter({
  routes: [
    {
      path: '/login',
      component: LoginComponent
    },
    {
      path: '/register',
      component: RegisterComponent
    },
    {
      path: '/forgot-password/:username', // 定义带有参数的路由
      component: ForgotPasswordComponent
    }
  ]
})

其中，`LoginComponent`、`RegisterComponent`和`ForgotPasswordComponent`是对应登录、注册和忘记密码页面的组件。

3. 在登录页面中点击跳转到忘记密码页面，并传递用户名参数：

<template>
  <div>
    <input type="text" v-model="username" placeholder="Username">
    <button @click="goToForgotPassword">Forgot Password</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    }
  },
  methods: {
    goToForgotPassword() {
      this.$router.push({
        path: `/forgot-password/${this.username}` // 传递用户名参数
      })
    }
  }
}
</script>

在点击"Forgot Password"按钮时，调用`goToForgotPassword`方法，并通过`this.$router.push`跳转到忘记密码页面，并将用户名作为参数传递。

4. 在忘记密码页面中接收并显示用户名参数：

<template>
  <div>
    <h2>Forgot Password</h2>
    <p>Username: {{ username }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    }
  },
  mounted() {
    this.username = this.$route.params.username // 获取路由参数中的用户名
  }
}
</script>

在忘记密码页面的`mounted`生命周期钩子中，通过`this.$route.params.username`获取路由参数中的用户名，并将其赋值给`username`变量，然后在页面中显示。

这样，当在登录页面输入用户名并点击"Forgot Password"按钮时，会跳转到忘记密码页面，并将不为空的用户名显示在忘记密码页面中。

需要注意的是，以上只是一个简单的示例，实际应用中可能还需要进行数据验证、用户认证等处理。你可以根据实际需求进行修改和扩展。