Question

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

代码

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

点击“秒”或“第二次测试”时，没有任何反应。

出了什么问题？

我遵循了一些例子，但没有任何作用。

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

Answer 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>。

Vuejs不渲染子路线

1 个答案: