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 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
捕获关闭窗口的脚本
Jan 10 Javascript
JavaScript全局函数使用简单说明
Mar 11 Javascript
基于jquery的固定表头和列头的代码
May 03 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
javascript制作坦克大战全纪录(1)
Nov 27 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
webpack开发环境和生产环境的深入理解
Nov 08 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
js获取本日、本周、本月的时间代码
Feb 01 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实现两个数组相加的方法
2015/02/17 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
图片自动更新(说明)
2006/10/02 Javascript
jquery load()在firefox(火狐)下显示不正常的解决方法
2011/04/05 Javascript
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
基于Vue实现timepicker
2017/04/25 Javascript
利用pm2部署多个node.js项目的配置教程
2017/10/22 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
2017/10/27 Javascript
vue中使用element组件时事件想要传递其他参数的问题
2019/09/18 Javascript
Python求两个list的差集、交集与并集的方法
2014/11/01 Python
使用python开发vim插件及心得分享
2014/11/04 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
Django stark组件使用及原理详解
2019/08/22 Python
tensorflow生成多个tfrecord文件实例
2020/02/17 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧装饰器信号与槽详细使用方法与实例
2020/03/06 Python
django修改models重建数据库的操作
2020/03/31 Python
什么是Python中的匿名函数
2020/06/02 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
Python读取yaml文件的详细教程
2020/07/21 Python
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
Hotter Shoes美国官网:英国最受欢迎的舒适鞋
2018/08/02 全球购物
尼克松手表官网:Nixon手表
2019/03/17 全球购物
员工年终演讲稿
2014/01/03 职场文书
母亲追悼会答谢词
2014/01/27 职场文书
简历上的自我评价怎么写
2014/01/28 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
工程合作意向书范本
2015/05/09 职场文书
2019年亲子运动会口号
2019/10/11 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书