CODEWITHSUNDEEP
vue.jsvue-router
CrazySynthax
CrazySynthax

Reputation: 15058

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

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?

Upvotes: 1

Views: 1223

Answers (1)

Toodoo
Toodoo

Reputation: 8760

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.

Upvotes: 3

Related Questions