代码之家 › 专栏 › 技术社区 › Felipe Paulo

Vuejs未渲染子路由

vue-router vuejs2 vue.js

Felipe Paulo · 技术社区 · 8 年前

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

密码

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

当点击“second”或“second test”时,什么都不会发生。

怎么了?

我举了几个例子,但都不管用。

控制台未显示任何问题。

1 回复 | 直到 8 年前

Ru Chern Chong ABHINAV 8 年前

为了让您的孩子路线正常工作,您需要 <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>

基本上,添加 <路由器视图(>)</路由器视图(>); 在第二页的模板中。

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

3 年前

Park · Vuejs道具,路径较长

4 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

4 年前

roev · 大堆来自(物体)。forEach不使用vue。js

4 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

8 年前

Ready Dev · Axios一次发出多个请求(vue.js)

8 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

8 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

8 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

8 年前

Tim · VueJS-迭代从AJAX调用返回的数据

8 年前