Handling complex router views in vue js

Question

I have an existing user interface that i want to convert into vue js but the views are a bit complex. I have an app that looks like this:

In image labelled 1 , i have"

header.vue
products.vue

and this is the code

<template>
  <div id="app">
    <Header />
    <router-view/>
  </div>
</template>

<script>
import Header from './components/layout/Header';
export default {
  name:"app",
  components: {
    Header
  }
}
</script>

and the router

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/products',
      name: 'products',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/Products.vue')
    }
  ]
})

the Products.vue holds the products list.

In the image labelled 2 is where i am having a hard time figuring out how things are going to work. When i click an item in the the products list it takes me to image two and the product is displayed in Area Y and more information is pulled using axios and displayed in Area Z .

When any link on side nav is linked, the information should be displayed in Area Y and axios data dipslayed in Area Z. When link four is cliekd it should display axios data in Area X.

The way i see it, pdetail.vue has three router views and its self a router view since a click from header.vue specifically products links opens pdetail.vue.

Supposing then i have two links in Area Z that i would like to click to and open another router view all within Area Z and not affect any previously visible Areas and side nav, would that be possible?. What concepts in vue would allow me build such a user interface?

You can use nested routers. Also, dynamic components with <component :is=""> for changing content based on a variable rather than a route. Or even just v-if. — Dan

garudamon garudamon · Accepted Answer · 2020-11-21T14:53:59

i just prefer to not using router-view in product detail, because product detail already part of it (loading from router-view).

and you can use v-if condition and also do scope data load in product detail, for example if i just @click image 2 sidebar it would send a request and then update the data state and area Z (or other area) will automatically update

Handling complex router views in vue js

1 Answers