vue-router: How to use view-router in more than one element?

Question

A very simple example for using a vue-router in template is the following code:

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

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

what I understand is that the content of router-view will be switched by the relevant component to the path.

However, if I have a template with more than one element affected by router. For example,

<template>
  <div id="app">
   <h1> header </h1>
    <router-view 1/>
    <h1> Inner </h1>
    <router-view 2/>
    <h1> Footer </h1>
  </div>
</template>

and let's say that 'router-view 1' and 'router-view 2' both can get different components based on the path.

In this case, how would you recommend me to use router?

Toodoo Toodoo · Accepted Answer · 2018-12-19T17:02:10

Based on official doc, you have to use named-views.

Like that, you can have multiple router-view rendering differents components for the same path.

With your example, it becomes :

<template>
  <div id="app">
   <h1> header </h1>
    <router-view /> // this will be the default
    <h1> Inner </h1>
    <router-view name="inner"/>
    <h1> Footer </h1>
  </div>
</template>

and your router will look like :

// Don't forget your imports
const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: HeaderComponent, // Will render in default router-view
        inner: InnerComponent // Will render in router-view named "inner"
      }
    }
  ]
})

More complex layouts are also describes in the official doc.

vue-router: How to use view-router in more than one element?

1 Answers