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实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
javascript计时器详解
Feb 28 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
javascript之Array 数组对象详解
Jun 07 Javascript
Vue单文件组件的如何使用方式介绍
Jul 28 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
Node.js搭建WEB服务器的示例代码
Aug 15 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
js实现课堂随机点名系统
Nov 21 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
cypress测试本地web应用
Jun 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
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
smarty表格换行实例
2014/12/15 PHP
PHP常用工具类大全附全部代码下载
2015/12/07 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
跟我学习javascript创建对象(类)的8种方法
2015/11/20 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
扩展jquery easyui tree的搜索树节点方法(推荐)
2016/10/28 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
vue watch监听对象及对应值的变化详解
2018/02/24 Javascript
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
python字符串循环左移
2019/03/08 Python
Python实现微信好友的数据分析
2019/12/16 Python
pytorch实现mnist分类的示例讲解
2020/01/10 Python
Python如何操作docker redis过程解析
2020/08/10 Python
时尚、社区、科技:SEVENSTORE
2019/04/26 全球购物
美赞臣新加坡官方旗舰店:Enfagrow新加坡
2019/05/15 全球购物
软件测试常见笔试题
2012/02/04 面试题
春节晚会主持词
2014/03/24 职场文书
会计专业自荐书
2014/07/08 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
办公室卫生管理制度
2015/08/04 职场文书
教你部署vue项目到docker
2022/04/05 Vue.js