vue2路由方式--嵌套路由实现方法分析


Posted in Javascript onMarch 06, 2020

本文实例讲述了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>

vue2路由方式--嵌套路由实现方法分析

上文中的 importFile,jsp 在上一篇路由基本用法中介绍过了,就是引入需要的文件。

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
JavaScript实现禁止后退的方法
Dec 27 Javascript
javascript 控制弹出窗口
Apr 10 Javascript
jQuery select操作控制方法小结
May 26 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
Eclipse配置Javascript开发环境图文教程
Jan 29 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
说说如何使用Vuex进行状态管理(小结)
Apr 14 Javascript
js回调函数原理与用法案例分析
Mar 04 Javascript
vue2路由基本用法实例分析
Mar 06 #Javascript
vue 动态组件用法示例小结
Mar 06 #Javascript
extjs图形绘制之饼图实现方法分析
Mar 06 #Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 #Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 #Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 #Javascript
JS实现网页端猜数字小游戏
Mar 06 #Javascript
You might like
强烈推荐:php.ini中文版(1)
2006/10/09 PHP
一个高ai的分页函数和一个url函数
2006/10/09 PHP
PHP异步调用socket实现代码
2012/01/12 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
初识通用数据库操作类――前端easyui-datagrid,form(php)
2015/07/31 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
js如何获取file控件的完整路径具体实现代码
2013/05/15 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
jQuery自定义元素右键点击事件(实现案例)
2017/04/28 jQuery
js中的数组对象排序分析
2018/12/11 Javascript
js如何获取图片url的Blob值并预览示例代码
2019/03/07 Javascript
angular 服务随记小结
2019/05/06 Javascript
基于form-data请求格式详解
2019/10/29 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
使用 Jest 和 Supertest 进行接口端点测试实例详解
2020/04/25 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
Python字符串格式化的方法(两种)
2017/09/19 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
python如何爬取网页中的文字
2020/07/28 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
Weblogic的布署方式
2013/08/23 面试题
电子专业推荐信范文
2013/11/18 职场文书
毕业生就业推荐信范文
2013/12/01 职场文书
运动会闭幕式通讯稿
2015/07/18 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
Matlab如何实现矩阵复制扩充
2021/06/02 Python
Python 可迭代对象 iterable的具体使用
2021/08/07 Python
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL