Vuejs不渲染子路由答案

【问题标题】：Vuejs not rendering sub-routeVuejs不渲染子路由
【发布时间】：2018-10-05 07:25:28
【问题描述】：

我正在尝试了解子路由，但下面的代码不起作用。

代码

<!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/

当点击“第二次”或“第二次测试”时，什么也没有发生。

怎么了？

我遵循了几个例子，但没有任何效果。

控制台没有显示任何问题。

【问题讨论】：

标签： vue.js vuejs2 vue-router

【解决方案1】：

为了让您的子路由正常工作，您需要在该组件本身中添加一个<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>。

【讨论】：