首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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框架路由使用方法，如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

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

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
解析js如何获取当前url中的参数值并复制给input
Jun 23 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
window.returnValue使用方法示例介绍
Jul 03 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
Jun 17 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 Javascript
JS执行控制之节流模式实例分析
Dec 21 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 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
PL-365(1) 电子管(5) 修复(2) 东方红(1) TECSUN(1) 德生(17) 再生机(1) 车机(1) 接收机(2) 海燕B411(1)
You might like
修改了一个很不错的php验证码(支持中文)
2007/02/14 PHP
php自动跳转中英文页面
2008/07/29 PHP
php读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
PHP将两个关联数组合并函数提高函数效率
2014/03/18 PHP
PHP插件PHPMailer发送邮件功能
2017/02/28 PHP
javascript新手语法小结
2008/06/15 Javascript
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
AngularJS 最常用的功能汇总
2016/02/17 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
JS实现获取汉字首字母拼音、全拼音及混拼音的方法
2017/11/14 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
2017/12/12 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
JavaScript创建对象的四种常用模式实例分析
2019/01/11 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
javascript实现滚轮轮播图片
2020/12/13 Javascript
python实现人脸识别代码
2017/11/08 Python
Python如何将函数值赋给变量
2020/04/28 Python
Django url 路由匹配过程详解
2021/01/22 Python
Soft Cotton捷克：来自爱琴海棉花的浴袍
2017/02/01 全球购物
Piercing Pagoda官网：耳环、戒指、项链、手链等
2020/09/28 全球购物
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
无财产无子女离婚协议书范文
2014/09/14 职场文书
总经理助理岗位职责
2015/01/31 职场文书
校园新闻稿范文
2015/07/18 职场文书
导游词创作书写原则以及开场白技巧怎么学？
2019/09/25 职场文书
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB
一篇文章带你学习Mybatis-Plus(新手入门)
2021/08/02 Java/Android