Vuejs不渲染子路由
Posted
技术标签:
【中文标题】Vuejs不渲染子路由【英文标题】：Vuejs not rendering sub-route 【发布时间】：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/
当点击“第二次”或“第二次测试”时，什么也没有发生。
怎么了？
我遵循了几个例子，但没有任何效果。
控制台没有显示任何问题。
【问题讨论】：
【参考方案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不渲染子路由的主要内容，如果未能解决你的问题，请参考以下文章
VueJS-3 如何从 vue-router 渲染 <router-view></router-view>？