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

debugcn 发表于 Dev

德C

我在vue-router中使用vue，当路由到子路由时，route不起作用。

  {
    path: '/user',
    name: 'User',
    component: User,
    children: [
      {
        path: 'profile',
        component: Profile,
      },
    ],
  }

以编程方式路由到/ user / 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>

凯斯特

确保您已放入<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中的children选项。

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

希望对您有所帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。