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

为“/用户/配置文件”提供路由名称“配置文件”&nbsp; {&nbsp; &nbsp; path: '/user',&nbsp; &nbsp; name: 'User',&nbsp; &nbsp; component: User,&nbsp; &nbsp; children: [&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; path: 'profile',&nbsp; &nbsp; &nbsp; &nbsp; name: "Profile",&nbsp; &nbsp; &nbsp; &nbsp; component: Profile,&nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; ],&nbsp; }导航 使用路由名称this.$router.push({name: "Profile"});您的用户组件应像这样声明用户.vue<template><div>&nbsp; &nbsp; <p>this is user component</p>&nbsp; &nbsp; <!-- your Profile component will replace this route-view -->&nbsp; &nbsp; <route-view />&nbsp;</div></template>演示https://codesandbox.io/s/falling-bash-6dl7m

Answer 2

请确保输入“用户组件”模板以显示嵌套（子）路由。<router-view></router-view><template>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <button @click="goToUserProfile()">create new</button>&nbsp; &nbsp; &nbsp; &nbsp; <router-view></router-view>&nbsp; &nbsp;<!-- placeholder for children routes -->&nbsp; &nbsp; </div>&nbsp;</template>&nbsp;然后，您可以通过两者访问和this.$router.push('/user/profile')this.$router.push({ name: 'UserProfile' })正如 Vue 路由器文档所述：要将组件渲染到此嵌套插座中，我们需要使用 VueRouter 中的子选项。https://router.vuejs.org/guide/essentials/nested-routes.html希望这有帮助。