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 相关文章推荐
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
window.open()详解及浏览器兼容性问题示例探讨
May 29 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 Javascript
js实现网页抽奖实例
Aug 05 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
基于JavaScript实现屏幕滚动效果
Jan 18 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
微信小程序实现全国机场索引列表
Jan 31 Javascript
微信小程序实现倒计时调用相机自动拍照功能
Jun 10 Javascript
JS正则表达式常见用法实例详解
Jun 19 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
thinkphp学习笔记之多表查询
2014/07/28 PHP
php中使用url传递数组的方法
2015/02/11 PHP
一个完整的php文件上传类实例讲解
2015/10/27 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
jQuery创建插件的代码分析
2011/04/14 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
2013/12/30 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
2015/06/09 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
2016/09/21 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
2016/12/27 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
重新认识vue之事件阻止冒泡的实现
2018/08/02 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
Python_LDA实现方法详解
2017/10/25 Python
python二维列表一维列表的互相转换实例
2018/07/02 Python
对python sklearn one-hot编码详解
2018/07/10 Python
python实现字符串和字典的转换
2018/09/29 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
IBatis持久层技术
2016/07/18 面试题
电话销售经理岗位职责
2013/12/07 职场文书
复核员上岗演讲稿
2014/01/05 职场文书
安全标准化汇报材料
2014/02/03 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
践行三严三实心得体会
2014/10/13 职场文书
三方协议书
2015/01/27 职场文书
天下第一关导游词
2015/02/06 职场文书
交通事故代理词范文
2015/05/23 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
Django REST framework 限流功能的使用
2021/06/24 Python
Ruby处理YAML和json数据
2022/04/18 Ruby
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server