CODEWITHSUNDEEP
vue.jsvuejs2vue-router
Felipe Paulo
Felipe Paulo

Reputation: 45

Vuejs not rendering sub-route

I am trying learn about sub-routes, but the code below dont works.

Code

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li><router-link to="/firstpage">First</router-link></li>
            <li><router-link to="/firstpage/segundapag">Second</router-link></li>

            <li><router-link :to="{name: 'second', params:{sec: 'test'}}">Second Test</router-link></li>

        </ul>
        <router-view></router-view>
    </div>
</body>
</html>

<template  id='firstpage'>
    <h1>First Page</h1>
</template>

<template  id='secondpage'>
    <h1>Second Page</h1>
</template>

<script type="text/javascript"> 

    var firstpage = Vue.component('firstpage',{
        template: "#firstpage"
    });

    var secondpage = Vue.component('secondpage',{
        template: "#secondpage"
    });


    var router = new VueRouter({
        routes:[
        {path: '/firstpage', component: firstpage,
        children:[
        {path: 'secondpage', component: secondpage},
        {path: ':sec', name:"second", component: secondpage},
        ]
    },
    ]

});

    var app = new Vue({
        el: "#app",
        mode: 'history',
        router,
    });

</script>

https://jsfiddle.net/tn3Lsqa5/

When clicks on "second" or "second test", nothing happens.

What´s wrong?

I follow a fews examples, but nothing works.

Console don't show any problem.

Upvotes: 0

Views: 44

Answers (1)

Ru Chern Chong
Ru Chern Chong

Reputation: 3756

In order for your child routes to work, you will need a <router-view></router-view> in that component itself.

Using your code,

<div id="#app">
  // your other code here
  <router-view></router-view>
</div>

<template id="secondPage">
  <h1>Second Page</h1>

  <router-view></router-view>
</template>

Basically, add <router-view></router-view> inside the template of your second page.

Upvotes: 1

Related Questions