Question

我在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>

Answer 1

为“ / user / profile”指定路由名称“ Profile”

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

导航使用路线名称

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

您的用户组件应这样声明

User.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中的children选项。

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

希望获得帮助。

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

2 个答案:

演示