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 相关文章推荐
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
Mar 18 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
Jun 19 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
Oct 10 Javascript
jQuery实现checkbox列表的全选、反选功能
Nov 24 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
Dec 02 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 Javascript
实例教学如何写vue插件
Nov 30 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 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项目的方法
2006/10/09 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
php程序内部post数据的方法
2015/03/31 PHP
PHP中“=&gt;
2019/03/01 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
jquery调用asp.net 页面后台的实现代码
2011/04/27 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
2014/07/31 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
基于wordpress的ajax写法详解
2018/01/02 Javascript
python批量修改文件后缀示例代码分享
2013/12/24 Python
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
Python实现简易Web爬虫详解
2018/01/03 Python
Python实现聊天机器人的示例代码
2018/07/09 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
python连接手机自动搜集蚂蚁森林能量的实现代码
2021/02/24 Python
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
英国运动服、设备及配件网站:DW Sports
2019/12/04 全球购物
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
仓库文员岗位职责
2014/04/06 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
2015入党自传书范文
2015/06/26 职场文书
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL