Vue.js框架路由使用方法实例详解
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-router使用方法详解
使用Vue.js + vue-router 创建单页应用是非常简单的.只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可. 一.普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <bod
-
Vue.js路由vue-router使用方法详解
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例,每个示例都有乞丐版,前5个示例有皇帝版. 乞丐版是将所有代码混杂在一起的HTML页面,皇帝版是基于vue-w
-
详解Vue.js搭建路由报错 router.map is not a function
错误: 出现问题原因:2.0已经没有map这个方法了,只有1.0兼容该方法. 解决方法: (1)方法1:使用命令npm install vue-router@0.7.13兼容1.0版本vue. 在代码中的使用方法: (2)解决方法2:基于vue2.0,写对应的方法. 具体用法如下图: 注:1.0和2.0在一些用法上有比较大的差别,用的时候需要注意. 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.
-
Vue.js如何实现路由懒加载浅析
前言 懒加载也就是延迟加载,不知道大家在工作中有没有发现,当你的SPA(单页应用程序)变得复杂时,打包构建后的Javascript包会变得非常大,以至于严重影响页面的加载时间.幸运的是:vue-router支持WebPack内置的异步模块加载系统.所以,那些使用较少的路由组件不必打包进bundles里,只需要在路由被访问时按需加载.话不多说了,来一起看看详细的实现过程: 使用 假设你的路由配置是这样的: import MainPage from './routes/MainPage.vue' i
-
vue.js路由跳转详解
本文为大家分享了vue.js路由的跳转,供大家参考,具体内容如下 1.路由demo示例 <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 组件来导航. --> <!-- 通过传入 `to` 属性指定链接. --> <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 --> <rout
-
Vue.js 单页面多路由区域操作的实例详解
单页面多路由区域操作 在一个页面中有两个及以上的<router-view>区域,需要通过设置路由的index.js,来操作这些区域的内容 App.vue 中设置: <router-view></router-view> <router-view name="left" style="float: left;width: 50%; height: 300px;background-color: #ccc;"></r
-
Vue.js：使用Vue-Router 2实现路由功能介绍
注意:vue-router 2只适用于Vue2.x版本,下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能. 推荐使用npm安装. npm install vue-router 一.使用路由 在main.js中,需要明确安装路由功能: import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' Vue.use(VueRouter) //1.定义组件,这里使用从其他
-
Vue.js框架路由使用方法实例详解
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-
-
vue全局使用axios的方法实例详解
在vue项目开发中,我们使用axios进行ajax请求,很多人一开始使用axios的方式,会当成vue-resoure的使用方式来用,即在主入口文件引入import VueResource from 'vue-resource'之后,直接使用Vue.use(VueResource)之后即可将该插件全局引用了,所以axios这样使用的时候就报错了,很懵逼. 仔细看看文档,就知道axios 是一个基于 promise 的 HTTP 库,axios并没有install 方法,所以是不能使用vue.us
-
Vue.js进行查询操作的实例详解
Vue.js进行查询操作的实例详解 实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="../lib/vue.min.js" type="text/javascript" ></script> <title>字符转换</title> </head>
-
Android中webview与JS交互、互调方法实例详解
Android中webview与JS交互.互调方法实例详解 前言: 对于试水的功能,一般公司都会采用H5的方式来开发,可以用很少的资源与很短的项目工期来完成. 但许多情况下,H5页面会需要一些原生持有的一些如用户信息之类的数据,一些交互也需要调用原生的,如toast之类要保持同一个手机风格一致的交互行为.这个时候就需要能够让JS主动调用原生的方法来进行操作或者获取数据.或者是原生调用JS的方法在H5加载的时候传递一些参数. 对于原生调用JS的方法 我们需要实现一个WebViewClient,在这
-
Laravel框架路由与MVC实例详解
本文实例讲述了Laravel框架路由与MVC.分享给大家供大家参考,具体如下: 1.路由 路由的作用就是将用户的不同url请求转发给相应的程序进行处理,laravel的路由定义在routes文件夹中,默认提供了四个路由文件,其中web.php文件定义基本页面请求. 1.1.基本路由 最基本的路由请求是get与post请求,laravel通过Route对象来定义不同的请求方式.例如定义一个url为'req'的get请求,返回字符串'get response': Route::get('req',f
-
vue.js表格组件开发的实例详解
前言 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 组件开发的基础 组件可以扩展 HTML 元素,封装可重用的代码.我理解为功能模块的模板吧. 对于vue来说,组件是这个样子的,我们在html里面写 <div id="example"> <my-compone
-
vue父子组件的通信方法(实例详解)
一.父组件向子组件传递数据 1.首先形成父子组件关系 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body>
-
JS FormData对象使用方法实例详解
本文实例讲述了JS FormData对象使用方法.分享给大家供大家参考,具体如下: FormData的主要用途有两个: 1.将form表单元素的name与value进行组合,实现表单数据的序列化,从而减少表单元素的拼接,提高工作效率. 2.异步上传文件 一.创建formData对象 1.创建一个空对象: //通过FormData构造函数创建一个空对象 var formdata=new FormData(); //可以通过append()方法来追加数据 formdata.append("name&
-
在vue项目中优雅的使用SVG的方法实例详解
1.基础介绍 本文旨在介绍如何在项目中配置和方便的使用svg图标. 本文以vue项目为例,当然在react中的使用原理基本相似. svg图标可以直接通过img标签来使用,也可当做icon来使用. 本文是参考了鑫旭大佬的文章:SVG Sprite技术介绍. 2.配置 安装svg-sprite-loader.通过vue-cli脚手架创建的项目默认情况下会使用 url-loader 对svg进行处理,所以需要处理下: { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, l
-
Vue import from省略后缀/加载文件夹的方法/实例详解
目录 简介 省略后缀 说明 官网网址 详解 文件名相同的处理流程 加载文件夹 简介 说明 详解 实例 1. 路由配置中导入layout文件夹 2.layout/index.vue引入目录 3.components/index.js引入各个组件 简介 本文介绍Vue在import时省略后缀以及import文件夹的方法. 省略后缀 说明 可以配置省略后缀,比如:test.js,只用test即可. 官网网址 解析(Resolve) | webpack 中文文档 详解 配置文件:webpack.base