Vue 路由器未路由到指定位置

Question

我正在将 vue 与 vue 路由器一起使用，路由在路由到子路由时不起作用。  {    path: '/user',    name: 'User',    component: User,    children: [      {        path: 'profile',        component: Profile,      },    ],  }以编程方式路由到 /用户/配置文件<template>    <div>            <button @click="goToUserProfile()">create new</button>    </div></template><script>export default {  methods: {    goToUserProfile() {      this.$router.push('/user/profile')    // Routing doesn't work       .catch(console.log);    },  },};</script>

Answer 1

为“/用户/配置文件”提供路由名称“配置文件”

  {

    path: '/user',

    name: 'User',

    component: User,

    children: [

      {

        path: 'profile',

        name: "Profile",

        component: Profile,

      },

    ],

  }

导航 使用路由名称

this.$router.push({name: "Profile"});

您的用户组件应像这样声明

用户.vue

<template>

<div>

    <p>this is user component</p>

    <!-- your Profile component will replace this route-view -->

    <route-view /> 

</div>

</template>

演示

https://codesandbox.io/s/falling-bash-6dl7m

Answer 2

请确保输入“用户组件”模板以显示嵌套（子）路由。<router-view></router-view>

<template>

    <div>

        <button @click="goToUserProfile()">create new</button>

        <router-view></router-view>   <!-- placeholder for children routes -->

    </div> 

</template> 

然后，您可以通过两者访问和this.$router.push('/user/profile')this.$router.push({ name: 'UserProfile' })

正如 Vue 路由器文档所述：要将组件渲染到此嵌套插座中，我们需要使用 VueRouter 中的子选项。

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

希望这有帮助。