Nested routes not rendering in router-view

Question

I'm setting up what is going to be a large system, so I want to have decentralised router.js files for every module. Each of them would have routes arrays declarations that would be pushed to the main routes array.

So for now I have a kind of root of routes file, which have the VueRouter instances and settings, and it imports the first level of route.js files to build the routes array.

main routes.js file

import DashboardRoutes from './views/dashboard/routes'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {// Root public site
      path: '/',
      component: () => import('./views/pages/Index'),
      children: PagesRoutes
    },
      name: 'page_error',
      path: '*',
      component: () => import('./views/error/Error')
    }
  ].concat(
    DashboardRoutes
  )
})

module (first level) routes.js file

import InventoryRoutes from './inventarios/routes'

const routes = {
  path: '/panel',
  component: () => import('./Index'), // This Index has a layout with a router-view in it
  children: [
    // Inicio del panel
    {
      name: 'dashboard',
      path: '',
      component: () => import('./Dashboard'),
    }
  ].concat(
    InventariosRoutes
  )
}

export default routes

Components (second level) routes.js file

const routes = {
  path: 'inventario',
  name: 'panel_inventario',
  component: { template: '<router-view/>' },
  children: [
    // Productos y servicios
    {
      name: 'panel_inventarios_productos-servicios',
      path: 'productos-servicios',
      component: () => import('./productos-servicios/ProductosServiciosHome'),
    },

  ]
}
export default routes

In the components tree of vue-tools I see an AnnonymousComponent in the place where my children's router-view should be.

Update

I just create an external component to name it and check if it's being rendered like this

Components (second level) routes.js file

const loader = {
  template: `
    <div class="InventarioLoader">
      <router-view></router-view>
    </div>
  `,
  name: 'InventarioLoader'
}

const routes = {
  path: 'inventario',
  name: 'panel_inventario',
  component: loader,
  children: [
    // children go here
  ]
}

Now I see my InventarioLoader component, but I still don't see my children components rendered in it

Update

I see this error on the console

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

Perhaps because `{ template: '' }` **is** an anonymous component? Try adding a `name` to it — Phil, Oct 10 '19 at 03:44
I'm not entirely sure what your question or problem is. Are you actually seeing any issues or were you just confused about the naming of a component? — Phil, Oct 10 '19 at 03:45
@Phil I tried with `` and didn't work either, this is a solution that I've seen in similar questions here, but didn't worked for me. The problem is that the component is not being rendered, but I do know that the router is working cuz I have a watcher to the route object to show a title in the nav and it is working — Arnaldo Perez, Oct 10 '19 at 11:14
Are you navigating to the correct route, ie `/panel/inventario/productos-servicios`? Also, I'd move the `*` route to the very end of the routes definition. See https://router.vuejs.org/guide/essentials/dynamic-matching.html#catch-all-404-not-found-route. In fact, that's probably your problem — Phil, Oct 10 '19 at 20:54
Like I said, the router is redirecting me to the right route, I see that on a display title I have in another component that watches for route changes. The thing is that the component it's not being rendered — Arnaldo Perez, Oct 11 '19 at 11:42

score 2 · Answer 1 · edited Jul 15 '22 at 05:14

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

By default, Vue does not compile string templates. This is for performance reasons.

Since the runtime-only builds are roughly 30% lighter-weight than their full-build counterparts, you should use it whenever you can

See https://v2.vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

Either create a real single-file component or use a render function

import Vue from 'vue'

const RouterView = Vue.component('router-view')

const loader = {
  name: 'InventarioLoader',
  render (createElement) {
    return createElement(RouterView)
  }
}

thanks so much bro, I figured it out myself but I appreciate your help — Arnaldo Perez, Oct 12 '19 at 04:31

score 0 · Answer 2 · answered Oct 12 '19 at 04:29

0

Apparently now you can't point a route to a inline component like {template:'<router-view/>} and my solution was to create a loader component with that template and use it on the parent route

answered Oct 12 '19 at 04:29

Arnaldo Perez

581
1
4
10

Nested routes not rendering in router-view

main routes.js file

module (first level) routes.js file

Components (second level) routes.js file

Update

Components (second level) routes.js file

Update

2 Answers2