javascript - Vue路由器不路由到指定位置

Question

我将 vue 与 vue-router 一起使用，当路由到子路由时路由不起作用。

  {
    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"});

你的用户组件应该这样声明

用户.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