vue多层嵌套路由实例分析


Posted in Javascript onMarch 19, 2019

本文实例讲述了vue多层嵌套路由。分享给大家供大家参考,具体如下:

多层嵌套:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <script src="bower_components/vue-router/dist/vue-router.js"></script>
  <style>
    .v-link-active{
      font-size: 20px;
      color: #f60;
    }
  </style>
</head>
<body>
  <div id="box">
    <ul>
      <li>
        <a v-link="{path:'/home'}">主页</a>
      </li>
      <li>
        <a v-link="{path:'/news'}">新闻</a>
      </li>
    </ul>
    <div>
      <router-view></router-view>
    </div>
  </div>
  <template id="home">
    <h3>我是主页</h3>
    <div>
      <a v-link="{path:'/home/login'}">登录</a>
      <a v-link="{path:'/home/reg'}">注册</a>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </template>
  <template id="news">
    <h3>我是新闻</h3>
  </template>
  <script>
    //1. 准备一个根组件
    var App=Vue.extend();
    //2. Home News组件都准备
    var Home=Vue.extend({
      template:'#home'
    });
    var News=Vue.extend({
      template:'#news'
    });
    //3. 准备路由
    var router=new VueRouter();
    //4. 关联
    router.map({
      'home':{
        component:Home,
        subRoutes:{
          'login':{
            component:{
              template:'<strong>我是登录信息</strong>'
            }
          },
          'reg':{
            component:{
              template:'<strong>我是注册信息</strong>'
            }
          }
        }
      },
      'news':{
        component:News
      }
    });
    //5. 启动路由
    router.start(App,'#box');
    //6. 跳转
    router.redirect({
      '/':'home'
    });
  </script>
</body>
</html>

效果图:

vue多层嵌套路由实例分析

路由其他信息:

/detail/:id/age/:age
{{$route.params | json}}    ->  当前参数
{{$route.path}}    ->  当前路径
{{$route.query | json}}    ->  数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="bower_components/vue/dist/vue.js"></script>
  <script src="bower_components/vue-router/dist/vue-router.js"></script>
  <style>
    .v-link-active{
      font-size: 20px;
      color: #f60;
    }
  </style>
</head>
<body>
  <div id="box">
    <ul>
      <li>
        <a v-link="{path:'/home'}">主页</a>
      </li>
      <li>
        <a v-link="{path:'/news'}">新闻</a>
      </li>
    </ul>
    <div>
      <router-view></router-view>
    </div>
  </div>
  <template id="home">
    <h3>我是主页</h3>
    <div>
      <a v-link="{path:'/home/login/zns'}">登录</a>
      <a v-link="{path:'/home/reg/strive'}">注册</a>
    </div>
    <div>
      <router-view></router-view>
    </div>
  </template>
  <template id="news">
    <h3>我是新闻</h3>
    <div>
      <a v-link="{path:'/news/detail/001'}">新闻001</a>
      <a v-link="{path:'/news/detail/002'}">新闻002</a>
    </div>
    <router-view></router-view>
  </template>
  <template id="detail">
    {{$route.params | json}}
    <br>
    {{$route.path}}
    <br>
    {{$route.query | json}}
  </template>
  <script>
    //1. 准备一个根组件
    var App=Vue.extend();
    //2. Home News组件都准备
    var Home=Vue.extend({
      template:'#home'
    });
    var News=Vue.extend({
      template:'#news'
    });
    var Detail=Vue.extend({
      template:'#detail'
    });
    //3. 准备路由
    var router=new VueRouter();
    //4. 关联
    router.map({
      'home':{
        component:Home,
        subRoutes:{
          'login/:name':{
            component:{
              template:'<strong>我是登录信息 {{$route.params | json}}</strong>'
            }
          },
          'reg':{
            component:{
              template:'<strong>我是注册信息</strong>'
            }
          }
        }
      },
      'news':{
        component:News,
        subRoutes:{
          '/detail/:id':{
            component:Detail
          }
        }
      }
    });
    //5. 启动路由
    router.start(App,'#box');
    //6. 跳转
    router.redirect({
      '/':'home'
    });
  </script>
</body>
</html>

效果图:

vue多层嵌套路由实例分析

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

Javascript 相关文章推荐
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
Dec 28 Javascript
基于jquery+thickbox仿校内登录注册框
Jun 07 Javascript
javascript中强制执行toString()具体实现
Apr 27 Javascript
js函数中onmousedown和onclick的区别和联系探讨
May 19 Javascript
JS的千分位算法实现思路
Jul 31 Javascript
在javaScript中关于submit和button的区别介绍
Oct 20 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
功能强大的Bootstrap组件(结合js)
Aug 03 Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
详解小程序云开发数据库
May 20 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
Mar 19 #Javascript
vue项目移动端实现ip输入框问题
Mar 19 #Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 #Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 #Javascript
express.js中间件说明详解
Mar 19 #Javascript
js array数组对象操作方法汇总
Mar 18 #Javascript
浅析JavaScript异步代码优化
Mar 18 #Javascript
You might like
php相当简单的分页类
2008/10/02 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
php 比较获取两个数组相同和不同元素的例子(交集和差集)
2019/10/18 PHP
Jquery常用的方法汇总
2015/09/01 Javascript
Javascript实现快速排序(Quicksort)的算法详解
2015/09/06 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
2016/01/12 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
Angular2自定义分页组件
2017/04/19 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
在Python中使用Neo4j数据库的教程
2015/04/16 Python
Python3.x中自定义比较函数
2015/04/24 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
numpy数组做图片拼接的实现(concatenate、vstack、hstack)
2019/11/08 Python
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
写出二分查找算法的两种实现
2013/05/13 面试题
国外的一些J2EE面试题一
2012/10/13 面试题
销售人员个人求职信
2013/09/26 职场文书
音乐教学反思
2014/02/02 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
十八大宣传标语
2014/10/09 职场文书
先进党组织事迹材料
2014/12/26 职场文书
办公室规章制度范本
2015/08/04 职场文书
导游词之澳门妈祖庙
2019/12/19 职场文书
浅谈Redis的几个过期策略
2021/05/27 Redis
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript