@DDark (Nicky) posted a new topic, subject "Displaying router-view separately for each links". It read:

   I have 4 route links but i want to show the component linked with them in different sections.
    
    As we know using router-view will place all the contents inside same element only.

Then @jkzing (JK) said

    You may need to do something like this:
    [code] 
        // Component A
        export default {
          name: 'ComponentA',
          template: '<div><router-view></router-view></div>'
        }
        
        // Component B
        export default {
          name: 'ComponentB',
          template: '<div><router-view></router-view></div>'
        }
        
        // router definition
        export default new Router({
          routes: [{
            path: '/a'
            component: ComponentA,
            children: [{
              path: '/your_route_1',
              component: YourComponent1
            }, {
              path: '/your_route_2',
              component: YourComponent2
            }]
          }, {
            path: '/b'
            component: ComponentB
            children: [{
              path: '/your_route_3',
              component: YourComponent3
            }, {
              path: '/your_route_4',
              component: YourComponent4
            }]
          }]
        })
        
    [/code]

Then @DDark (Nicky) said

    Sorry!! I donot want nested routes. Instead I want to use two router-view in same template. So that I can open two links of same children in two different elements.
    
    For example:-  
    in ComponentB of yours-
    
    //to open '/your_route_1 ' 
    
    //to open '/your_route_2 '

After which, @jkzing (JK) added

    The `ComponentA` and `ComponentB` are just wrappers, you will have them used in your **only** element.  
    And after all the component structure should look like:
    [code] 
        // for route /your_route_1
        <root-component>
          <component-a>
            <your-component-1 />
          </component-a>
        </root-component>
        
    [/code]
    
    And please notice the `/` before `your_route_1`, it means you can access this route via `/your_route_1` directly instead of `/a/your_route_1` which is not a **nested route** actually.


{'source': 'discourse', 'url': 'https://forum.vuejs.org/t/displaying-router-view-separately-for-each-links/13076', 'title': 'Displaying router-view separately for each links', 'views': 395, 'has_accepted_answer': False, 'word_count': 223, 'like_count': 0, 'reply_count': 2, 'participant_count': 2, 'posts': 4, 'tags': '', 'author': '@DDark (Nicky)', 'participants': '@DDark (Nicky), @jkzing (JK)', 'image_url': [None], 'created_at': '2017-06-22T01:01:06.255Z', 'last_posted_at': '2017-06-22T05:38:06.093Z'}