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 相关文章推荐
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
调用jQuery滑出效果时闪烁的解决方法
Mar 27 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
jQuery EasyUi实战教程之布局篇
Jan 26 Javascript
微信小程序中实现一对多发消息详解及实例代码
Feb 14 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
Node.js中多进程模块Cluster的介绍与使用
May 27 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
Vuex 单状态库与多模块状态库详解
Dec 11 Javascript
详解Vue template 如何支持多个根结点
Feb 10 Javascript
vue+AI智能机器人回复功能实现
Jul 16 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
JavaScript 字符串连接性能优化
2008/12/20 Javascript
jQuery自动切换/点击切换选项卡效果的小例子
2013/08/12 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
跟我学习javascript的执行上下文
2015/11/18 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
详解vue使用插槽分发内容slot的用法
2019/03/28 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
总结Python中逻辑运算符的使用
2015/05/13 Python
python清除字符串里非数字字符的方法
2015/07/02 Python
Python手机号码归属地查询代码
2016/05/04 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
如何使用Python的Requests包实现模拟登陆
2018/04/27 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
Python对象属性自动更新操作示例
2018/06/15 Python
Python使用pandas处理CSV文件的实例讲解
2018/06/22 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
django 实现简单的插入视频
2020/04/07 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
python连接mysql有哪些方法
2020/06/24 Python
Python浮点型(float)运算结果不正确的解决方案
2020/09/22 Python
Python中常用的os操作汇总
2020/11/05 Python
新奇的小玩意:IWOOT
2016/07/21 全球购物
美国高街时尚品牌:OASAP
2016/07/24 全球购物
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
这76道Java面试题及答案,祝你能成功通过面试
2016/04/16 面试题
劲霸男装广告词改编版
2014/03/21 职场文书
日语专业求职信
2014/07/04 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
党支部四风整改方案
2014/10/25 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书