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通过class来获取元素实现代码
Feb 20 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
javascript多行字符串的简单实现方式
May 04 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 Javascript
Node.js中的cluster模块深入解读
Jun 11 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
JS原型对象操作实例分析
Jun 06 Javascript
vue实现循环滚动列表
Jun 30 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
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 透明水印生成代码
2012/08/27 PHP
php生成短网址示例
2014/05/05 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
PHP中类型转换 ,常量,系统常量,魔术常量的详解
2017/10/26 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
jQuery实现的分页插件完整示例
2020/05/26 jQuery
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
人脸识别经典算法一 特征脸方法(Eigenface)
2018/03/13 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
pytorch:实现简单的GAN示例(MNIST数据集)
2020/01/10 Python
django中的数据库迁移的实现
2020/03/16 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
CSS3 对过渡(transition)进行调速以及延时
2020/10/21 HTML / CSS
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
毕业实习个人鉴定范文
2013/12/10 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
2014年内勤工作总结
2014/11/24 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
关于幸福的感言
2015/08/03 职场文书