Vue.js框架路由使用方法实例详解


Posted in Javascript onAugust 25, 2017

Vue.js框架路由使用方法实例详解

html代码:

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'>
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/css.css" rel="external nofollow" />
    <script src="../lib/vue.min.js" type="text/javascript"></script>
    <script src="../lib/vue-router.js" type="text/javascript" charset="utf-8"></script>
    <title>模仿app页面</title>
  </head>

  <body>
    <div id="app">
      <router-view v-bind:info='info' v-bind:pic='pic' v-bind:icon='icon'></router-view>
      <!--底部导航-->
      <div id="nav">
      <ul class="nav nav-pills">
        <li class="active">
          <a v-on:click="show(0)"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> 首页</a>
        </li>
        <li >
          <a v-on:click="show(1)"><span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 消息</a>
        </li>
        <li>
          <a v-on:click="show(2)"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 购买</a>
        </li>
        <li>
          <a v-on:click="show(3)"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> 我的</a>
        </li>
      </ul>
      </div>
    </div>
    <!--视图页面-->
    <script type="text/x-template" id='home'>
      <div>
        <!--头部-->
        <div id="header">
          <h5>这是什么app</h5>
        </div>
        <!--轮播图-->
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>

          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="../img/券买买_淘宝天猫优惠券_files/594781cc80d85.jpg" alt="...">
              <div class="carousel-caption">
                ...
              </div>
            </div>
            <div class="item" v-for='y in pic'>
              <img v-bind:src='y.picUrl' alt="...">
              <div class="carousel-caption">
                ...
              </div>
            </div>

          </div>
          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" rel="external nofollow" rel="external nofollow" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" rel="external nofollow" rel="external nofollow" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
        <!--九宫格-->
        <div id="jiugongge">
          <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" v-for='z in icon'>
            <img v-bind:src="z.iurl" />
            <div>{{z.name}}</div>
          </div>
        </div>
        <!--主页商品展示-->
        <div v-for='x in info'>
          <a v-bind:href='x.toUrl'>
            <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 production">
                <div class="image"><img v-bind:src='x.imgsrc' /></div>
                <div class="content">{{x.info}}</div>
            </div>
          </a>
        </div>
        <div> </div>
        <div> </div>
      </div>
    </script>
    <script type="text/x-template" id='info'>
      <div>
        这是info界面
      </div>
    </script>
    <script type="text/x-template" id='goumai'>
      <div>
        这是购买界面
      </div>
    </script>
    <script type="text/x-template" id='wode'>
      <div>
        这是我的界面
      </div>
    </script>
    <script type="text/javascript">
      /*定义组件*/
      const home = {
        template: '#home',
        props:{
          info:Array,
          pic:Array,
          icon:Array
        }
      }
      const info = {
        template: '#info'
      }
      const goumai = {
          template: '#goumai'
        }
      const wode = {
          template:'#wode'
      }
      /*定义路由*/
      const myroutes = [{
          path: '/home',
          component: home
        }, {
          path: '/info',
          component: info
        }, {
          path: '/goumai',
          component: goumai
        }, {
          path: '/wode',
          component: wode
        }]
        /*创建VueRouter实例,然后传'routes'配置*/
      const myr = new VueRouter({
          routes: myroutes
        })
        /*创建Vue和挂载根实例*/
      const app = new Vue({
        router: myr,
        data:{
            info:[
              {imgsrc:'http://img.alicdn.com/bao/uploaded/i2/TB16ybkRpXXXXXeXXXXXXXXXXXX_!!0-item_pic.jpg',info:'西麦燕麦片380克/袋装 原味纯麦片早餐 成人即食免煮冲饮无蔗糖',nav:'咖啡/麦片/冲饮',toUrl:'http://item.taobao.com/item.htm?id=534003771051'},
              {imgsrc:'http://img.alicdn.com/bao/uploaded/i2/TB1SLSiRFXXXXaMXVXXXXXXXXXX_!!0-item_pic.jpg',info:'安全裤防走光女夏中高腰冰丝无痕莫代尔平角打底保险裤大码不卷边',nav:'女士内衣/男士内衣/家居服',toUrl:'http://item.taobao.com/item.htm?id=550539721556'},
              {imgsrc:'http://img.alicdn.com/bao/uploaded/i4/TB1cYYHQVXXXXakXXXXXXXXXXXX_!!0-item_pic.jpg',info:'情侣装夏装韩版百搭2017新款体恤宽松半袖学生短袖T恤女潮上衣服',nav:'女装/女士精品',toUrl:'http://item.taobao.com/item.htm?id=549327457300'}
            ],
            pic:[
              {picUrl:'../img/券买买_淘宝天猫优惠券_files/555737bbad955.jpg'},
              {picUrl:'../img/券买买_淘宝天猫优惠券_files/594781cc80d85.jpg'}
            ],
            icon:[
              {iurl:'../img/券买买_淘宝天猫优惠券_files/5695f4aeb8a3f.png',name:'女装'},
              {iurl:'../img/券买买_淘宝天猫优惠券_files/5695ff4d7bd96.png',name:'男装'},
              {iurl:'../img/券买买_淘宝天猫优惠券_files/5695ff6d5b989.png',name:'内衣'},
              {iurl:'../img/券买买_淘宝天猫优惠券_files/5695ff9b2eebd.png',name:'鞋子'},
              {iurl:'../img/券买买_淘宝天猫优惠券_files/5695ffd10d9e3.png',name:'玩具'},
              {iurl:'../img/券买买_淘宝天猫优惠券_files/569600f2bb151.png',name:'盆栽'},
              {iurl:'../img/券买买_淘宝天猫优惠券_files/569600f2bb151.png',name:'首饰'},
              {iurl:'../img/券买买_淘宝天猫优惠券_files/5805f0ba98f4f.png',name:'美食'},
            ]
        },
        methods: {
          show: function(num) {
            if(num == 0) {
              myr.push('home')
            } else if(num == 1) {
              myr.push('info')
            } else if(num == 2) {
              myr.push('goumai')
            }else{
              myr.push('wode')
            }
          }
        }
      }).$mount('#app')
      window.onload = app.show(0)
    </script>
    <script src="../js/js.js" type="text/javascript" charset="utf-8"></script>
  </body>

</html>

css代码:

#header{
  background: white;
  text-align: center;
  margin:0 auto;
}
#jiugongge{
  margin-top:20px;
}
#jiugongge div{
  text-align: center;
}
.production{
  display:flex;
  margin-top:10px;
}
.production .image{
  flex: 1;
}
.production .content{
  flex: 2;
}
.image img {
  width:150px;
}
#nav{
  position: fixed;
  bottom: 0px;
  background: white;
  width:100%;
  margin:0 10px;
}
#nav ul{
  width:100%;
}
#nav li{
  width:24%;
}
#produces{
  height:40px;
  margin-bottom: 40px;
}

js代码:

$('ul').on('click','li',function(){
  $('li').attr('class','')
  $(this).attr('class','active')
})

效果图:

Vue.js框架路由使用方法实例详解

以上就是Vue.js框架路由使用方法,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jquery的颜色选择插件实例代码
Oct 02 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
关于JavaScript数组你所不知道的3件事
Aug 24 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
Angular.Js中ng-include指令的使用与实现
May 07 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
关于Vue.nextTick()的正确使用方法浅析
Aug 25 #Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 #jQuery
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 #Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 #Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
Aug 25 #Javascript
JavaScript数据类型的存储方法详解
Aug 25 #Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 #Javascript
You might like
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
Javascript new关键字的玄机 以及其它
2010/08/25 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
浅谈javascript中return语句
2015/07/15 Javascript
jQuery过滤特殊字符及JS字符串转为数字
2016/05/26 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
JavaScript实现区块链
2018/03/14 Javascript
深度了解vue.js中hooks的相关知识
2019/06/14 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
使用python实现省市三级菜单效果
2016/01/20 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
python 提取文件指定列的方法示例
2019/08/07 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
python中常见错误及解决方法
2020/06/21 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
python缩进长度是否统一
2020/08/02 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
Ajax请求总共有多少种Callback
2016/07/17 面试题
经典优秀个人求职自荐信格式
2013/09/25 职场文书
实习老师离校感言
2014/02/03 职场文书
离职保密承诺书
2014/05/28 职场文书
庆六一文艺汇演活动方案
2014/08/26 职场文书
中秋晚会活动方案
2014/08/31 职场文书
"9.18"国耻日演讲稿范文
2014/09/14 职场文书
出生医学证明书
2014/09/15 职场文书
介绍信如何写
2015/01/31 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
Python List remove()实例用法详解
2021/08/02 Python
python 判断字符串当中是否包含字符(str.contain)
2022/06/01 Python