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 相关文章推荐
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
vue-cli 3.x 修改dist路径的方法
Sep 19 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
js笔试题-接收get请求参数
Jun 15 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
windows下配置apache+php+mysql时出现问题的处理方法
2014/06/20 PHP
PHP中大于2038年时间戳的问题处理方案
2015/03/03 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
2015/06/23 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
判断控件是否已加载完成的代码
2010/02/24 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
jQuery在ul中显示某个li索引号的方法
2015/03/17 Javascript
AngularJS实现表单手动验证和表单自动验证
2015/12/09 Javascript
基于js里调用函数时,函数名带括号和不带括号的区别
2016/07/28 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
tensorflow 实现从checkpoint中获取graph信息
2020/02/10 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
彪马法国官网:PUMA法国
2019/12/15 全球购物
校园之星获奖感言
2014/01/29 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
期中考试复习计划
2015/01/19 职场文书
海底两万里读书笔记
2015/06/26 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
如何写好竞聘报告
2019/04/03 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
Python Pytorch查询图像的特征从集合或数据库中查找图像
2022/04/09 Python