Вуэйс не рендерит суб-маршрут - PullRequest
Новая
       10

Вуэйс не рендерит суб-маршрут

0 голосов
/ 25 апреля 2018

Я пытаюсь узнать о под-маршрутах, но код ниже не работает.

код 

<!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/vue-router@2.0.0/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/

При нажатии на «второй» или «второй тест» ничего не происходит.

Что не так?

Я следую нескольким примерам, но ничего не получается.

Консоль не показывает никаких проблем.

1 Ответ

0 голосов
/ 25 апреля 2018

Чтобы ваши дочерние маршруты работали, вам потребуется <router-view></router-view> в самом компоненте.

Используя ваш код, 

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

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

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

Как правило, добавьте <router-view></router-view> в шаблон вашей второй страницы.

...