本篇文章为大家展示了如何在vue2中实现嵌套路由，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
计算
安全
数据库
网络和加速
企业服务
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>routerTest1</title>
<c:import url="importFile.jsp"></c:import>
</head>
<body>
<div id="app">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#" rel="external nofollow" >Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<%--定义跳转的路径--%>
<li class="active"> <router-link to="/home">Home</router-link></li>
<li> <router-link to="/list">List</router-link></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<!—路由切换组件template 插入的位置 -->
<router-view></router-view>
</div>
</div>
<script type="x-template" id="modalTel">
<div>
<h2> this is home page </h2>
<div>
<ul >
<li>
<router-link to="/home/lists">List</router-link>
</li>
<li>
<router-link to="/home/detail">Detail</router-link>
</li>
</ul>
</div>
<router-view></router-view>
</div>
</script>
<script>
/*
* var Home = Vue.extend({
template:'<h2> this is home page </h2>',
})
* */
/*使用Javascript模板定义组件*/
var Home = Vue.extend({
template:'#modalTel'
})
/*创建路由器实例*/
const router = new VueRouter({
routes:[
{ path: '/', redirect: '/home' },
{
path:'/home',
component:Home,
/*嵌套下的路由（子路由）*/
children:[
{
path:'/home/lists',
component:{
template:'<h2> this is lists pages</h2>'
},
},
{
path:'/home/detail',
component:{
template:'<h2> this is detail pages</h2>'
},
}
]
},
{
path:'/list',
component:{
/*显示路由的属性*/
template:'<h2> this is list page----{{$route.path}}</h2>'
}
}
]
});
const app = new Vue({
router:router
}).$mount('#app')
</script>
</body>
</html>上述内容就是如何在vue2中实现嵌套路由，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
