vue2路由方式--嵌套路由实现方法分析
更新时间：2020年03月06日 11:15:25 作者：程序媛-jjl
这篇文章主要介绍了vue2嵌套路由实现方法,结合实例形式分析了vue2嵌套路由基本实现方法与操作注意事项,需要的朋友可以参考下
本文实例讲述了vue2嵌套路由实现方法。分享给大家供大家参考，具体如下：
前面讲过了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>
<h1> this is home page </h1>
<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:'<h1> this is home page </h1>',
})
* */
/*使用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:'<h1> this is lists pages</h1>'
},
},
{
path:'/home/detail',
component:{
template:'<h1> this is detail pages</h1>'
},
}
]
},
{
path:'/list',
component:{
/*显示路由的属性*/
template:'<h1> this is list page----{{$route.path}}</h1>'
}
}
]
});
const app = new Vue({
router:router
}).$mount('#app')
</script>
</body>
</html>
上文中的 importFile,jsp 在上一篇路由基本用法中介绍过了，就是引入需要的文件。
希望本文所述对大家vue.js程序设计有所帮助。
相关文章
这篇文章主要介绍了Vue双向绑定实现原理与方法,结合实例形式详细分析了发布者-订阅者模式、脏值检查、数据劫持与双向绑定相关实现技巧,需要的朋友可以参考下2020-05-05
本文给大家分享使用vue-cli创建项目基于webpack模板打包的配置方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-07-07
这篇文章主要介绍了如何使用vue过滤器filter，对vue感兴趣的同学，可以参考下2021-05-05
这篇文章主要介绍了vue项目中loadsh库常用方法说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要介绍了vue2中使用sass并配置全局的sass样式变量的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-09-09
vue3+vite兼容低版本的白屏问题详解(安卓7/ios11)
这篇文章主要给大家介绍了关于vue3+vite兼容低版本的白屏问题的相关资料,还给大家介绍了vue打包项目以后白屏和图片加载不出来问题的解决方法,需要的朋友可以参考下2022-12-12
vue3+vite 动态引用静态资源及动态引入assets文件夹图片的多种方式
通过require动态引入, 发现报错：require is not defind,这是因为 require 是属于 Webpack 的方法,本文给大家介绍vue3+vite 动态引用静态资源及动态引入assets文件夹图片的多种方式,感兴趣的朋友一起看看吧2023-10-10
在vue项目中,输入框只允许输入数字,现将自己使用的一种方法记录,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2023-11-11
这篇文章主要介绍了在vue中实现禁止回退上一步,路由不存历史记录，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了Element el-row el-col 布局组件使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
最新评论