CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvue-router
DecPK
DecPK

Reputation: 25401

Vue router doesn't route to specified location

I'm using vue with vue-router and route doesn't work when routing to children route.

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

Programmatically routing to /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>

Upvotes: 2

Views: 2302

Answers (2)

JayTam
JayTam

Reputation: 258

give a route name "Profile" for "/user/profile" 

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

navigation use route name

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

your User component should declare like this

User.vue

<template>
<div>
    <p>this is user component</p>
    <!-- your Profile component will replace this route-view -->
    <route-view /> 
</div>
</template>

demo

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

Upvotes: 4

Kaeszt
Kaeszt

Reputation: 50

Do your ensure that you put <router-view></router-view> in User Component template to make the nested (children) routes displayed.

<template>
    <div>
        <button @click="goToUserProfile()">create new</button>
        <router-view></router-view>   <!-- placeholder for children routes -->
    </div> 
</template>

Then you can access by both this.$router.push('/user/profile') and this.$router.push({ name: 'UserProfile' })

As Vue router document states: To render components into this nested outlet, we need to use the children option in VueRouter.

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

Hope this help.

Upvotes: 2

Related Questions