Displaying parent component when URL changes in Vue Router for child components

Question

Displaying parent component when URL changes in Vue Router for child components

Currently, I am delving into the world of Vue and encountering an issue with nested routers. Despite defining some child routers in the routes, whenever I access the child route, the parent component continues to be displayed. Below is the snippet of my code:

App.vue:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-link :to="{name: 'Home'}">Home</router-link>
    <router-link to="/cart">Cart</router-link>
    <router-link to="/admin">Admin</router-link>
    <router-link to="/admin/add">【Admin Add】</router-link>
    <router-link to="/admin/edit">Admin Edit</router-link>

    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Router/index.js:

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/pages/Home'
import Cart from '@/components/pages/Cart'
import Index from '@/components/pages/Admin/Index'
import Add from '@/components/pages/Admin/Add'
import Edit from '@/components/pages/Edit'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/cart',
      name: 'Cart',
      component: Cart
    },
    // {
    //   path: '/admin/index',
    //   name: 'Index',
    //   component: Index
    // },
    // {
    //   path: '/admin/add',
    //   name: 'Add',
    //   component: Add
    // },
    // {
    //   path: '/admin/edit',
    //   name: 'Edit',
    //   component: Edit
    // }
    {
      path: '/admin',
      // name: 'Admin',
      component: Index,

      children: [
        {
          path: 'add',
          name: 'Add',
          component: Add
        },
        {
          path: 'edit',
          name: 'Edit',
          component: Edit
        }
      ]
    }
  ]
})

When I opt to exclude the children routers, the component displays correctly, similar to the commented-out code above.

I find myself in a state of confusion regarding this matter and would greatly appreciate any assistance provided.

javascript vue.js vue-router

Answer 1

Answer №1

Make sure to include

<router-view></router-view>

in your Index component to enable routing. Here's a helpful example from the vue-router documentation.

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

const UserHome = { template: '<div>Home</div>' }
const UserProfile = { template: '<div>Profile</div>' }
const UserPosts = { template: '<div>Posts</div>' }

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        // UserHome will be rendered inside User's <router-view>
        // when /user/:id is matched
        { path: '', component: UserHome },

        // UserProfile will be rendered inside User's <router-view>
        // when /user/:id/profile is matched
        { path: 'profile', component: UserProfile },

        // UserPosts will be rendered inside User's <router-view>
        // when /user/:id/posts is matched
        { path: 'posts', component: UserPosts }
      ]
    }
  ]
})

const app = new Vue({ router }).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <p>
    <router-link to="/user/foo">/user/foo</router-link>
    <router-link to="/user/foo/profile">/user/foo/profile</router-link>
    <router-link to="/user/foo/posts">/user/foo/posts</router-link>
  </p>
  <router-view></router-view>
</div>

Answer 2

Make sure to include

<router-view></router-view>

in your Index component to enable routing. Here's a helpful example from the vue-router documentation.

const User = {
  template: `
    <div class="user">
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
    </div>
  `
}

const UserHome = { template: '<div>Home</div>' }
const UserProfile = { template: '<div>Profile</div>' }
const UserPosts = { template: '<div>Posts</div>' }

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        // UserHome will be rendered inside User's <router-view>
        // when /user/:id is matched
        { path: '', component: UserHome },

        // UserProfile will be rendered inside User's <router-view>
        // when /user/:id/profile is matched
        { path: 'profile', component: UserProfile },

        // UserPosts will be rendered inside User's <router-view>
        // when /user/:id/posts is matched
        { path: 'posts', component: UserPosts }
      ]
    }
  ]
})

const app = new Vue({ router }).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <p>
    <router-link to="/user/foo">/user/foo</router-link>
    <router-link to="/user/foo/profile">/user/foo/profile</router-link>
    <router-link to="/user/foo/posts">/user/foo/posts</router-link>
  </p>
  <router-view></router-view>
</div>

Displaying parent component when URL changes in Vue Router for child components

Answer №1

Similar questions

What is the mechanism behind pushing an empty array into another empty array?

Merge multiple Javascript files into one consolidated file

I am selecting specific items from a list to display only 4 on my webpage

Steps for eliminating an element upon the second click:

Prevent the opening of tabs in selenium using Node.js

Removing a CSS class using JQuery

Is it recommended to use new Vue() on each Blade or components?

Retrieve information from an API and populate a MDBootstrap datatable using Vue.js and Axios

The occurrence of the "contextmenu" event can cause disruption to the execution of a function triggered by the "onmousemove" event

Pausing a running function in React

Extract information from a webpage using JavaScript through the R programming language

There seems to be a glitch in my programming that is preventing it

Ensure that a string contains only one instance of a specific substring

Having trouble adding flexslider before a div element with jQuery

IE and Firefox display different responses when encountering an empty XML document

What are some creative ways to utilize postMessage instead of relying on nextTick or setTimeout with a zero millisecond delay?

What is the best method in typescript to combine objects in an array with identical properties but varying values?

Is it possible to wait for two asynchronous actions using only one await statement?

When the "x" close icon is clicked, the arrow should toggle back to 0 degrees

Comparing Angular extend to $provide.decorator: A breakdown