CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvue-router
Afiq Rosli
Afiq Rosli

Reputation: 385

Nested router view not showing; view components are not mounted

I have /your route with a /your/profile nested route. When I go to /your, the text "Index" is rendered. When going the nested route (/your/profile), it doesn't show anything. Both the Index & Profile components are not even mounted.

I'm expecting to see the text "Index" & "Profile" (below it), as well as the alert text. But None are showing. I have followed the instruction as documented from the official source. Any idea what's causing the issue?

router/index.js

import Your from "../views/your/Index.vue";
import Profile from "../views/your/Profile.vue";

const routes = [
  {
    path: "/your",
    name: "Your",
    component: Your,
    children: [
      {
        path: "/profile",
        component: Profile
      }
    ]
  }
];

Index.vue

<template>
  <div>
    <v-container>
      <p>Index</p>
      <router-view></router-view>
    </v-container>
  </div>
</template>

<script>
export default {
  name: "Your",
  mounted() {
    alert("Index Mounted");
  }
};
</script>

Profile.vue

<template>
  <div>
    <p>Profile</p>
  </div>
</template>

<script>
export default {
  name: "Profile",
  mounted() {
    alert("Profile Mounted");
  }
};
</script>

Upvotes: 0

Views: 775

Answers (1)

Gaurav Bhardwaj
Gaurav Bhardwaj

Reputation: 338

Remove the / from children

Because this will be treated as root path

Look at vue docs

vue docs

Upvotes: 1

Related Questions