Vue.js框架路由使用方法實(shí)例詳解
更新時(shí)間：2017年08月25日 09:54:27 投稿：lqh
這篇文章主要介紹了Vue.js框架路由使用方法實(shí)例詳解的相關(guān)資料,這里提供實(shí)例幫助大家學(xué)習(xí)理解這部分內(nèi)容，需要的朋友可以參考下
Vue.js框架路由使用方法實(shí)例詳解
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 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頁(yè)面</title>
</head>
<body>
<div id="app">
<router-view v-bind:info='info' v-bind:pic='pic' v-bind:icon='icon'></router-view>
<!--底部導(dǎo)航-->
<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> 首頁(yè)</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> 購(gòu)買</a>
</li>
<li>
<a v-on:click="show(3)"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> 我的</a>
</li>
</ul>
</div>
</div>
<!--視圖頁(yè)面-->
<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/券買買_淘寶天貓優(yōu)惠券_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>
<!--主頁(yè)商品展示-->
<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>
這是購(gòu)買界面
</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
}]
/*創(chuàng)建VueRouter實(shí)例，然后傳'routes'配置*/
const myr = new VueRouter({
routes: myroutes
})
/*創(chuàng)建Vue和掛載根實(shí)例*/
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:'安全褲防走光女夏中高腰冰絲無痕莫代爾平角打底保險(xiǎn)褲大碼不卷邊',nav:'女士?jī)?nèi)衣/男士?jī)?nèi)衣/家居服',toUrl:'http://item.taobao.com/item.htm?id=550539721556'},
{imgsrc:'http://img.alicdn.com/bao/uploaded/i4/TB1cYYHQVXXXXakXXXXXXXXXXXX_!!0-item_pic.jpg',info:'情侶裝夏裝韓版百搭2017新款體恤寬松半袖學(xué)生短袖T恤女潮上衣服',nav:'女裝/女士精品',toUrl:'http://item.taobao.com/item.htm?id=549327457300'}
],
pic:[
{picUrl:'../img/券買買_淘寶天貓優(yōu)惠券_files/555737bbad955.jpg'},
{picUrl:'../img/券買買_淘寶天貓優(yōu)惠券_files/594781cc80d85.jpg'}
],
icon:[
{iurl:'../img/券買買_淘寶天貓優(yōu)惠券_files/5695f4aeb8a3f.png',name:'女裝'},
{iurl:'../img/券買買_淘寶天貓優(yōu)惠券_files/5695ff4d7bd96.png',name:'男裝'},
{iurl:'../img/券買買_淘寶天貓優(yōu)惠券_files/5695ff6d5b989.png',name:'內(nèi)衣'},
{iurl:'../img/券買買_淘寶天貓優(yōu)惠券_files/5695ff9b2eebd.png',name:'鞋子'},
{iurl:'../img/券買買_淘寶天貓優(yōu)惠券_files/5695ffd10d9e3.png',name:'玩具'},
{iurl:'../img/券買買_淘寶天貓優(yōu)惠券_files/569600f2bb151.png',name:'盆栽'},
{iurl:'../img/券買買_淘寶天貓優(yōu)惠券_files/569600f2bb151.png',name:'首飾'},
{iurl:'../img/券買買_淘寶天貓優(yōu)惠券_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框架路由使用方法，如有疑問請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
這篇文章主要介紹了vue數(shù)據(jù)變化但頁(yè)面刷新問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue+element下拉列表默認(rèn)值問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
詳解關(guān)于Vuex的action傳入多個(gè)參數(shù)的問題
這篇文章主要介紹了詳解關(guān)于Vuex的action傳入多個(gè)參數(shù)的問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
vue項(xiàng)目國(guó)際化vue-i18n的安裝使用教程
最近接觸學(xué)習(xí)Vue.js框架結(jié)合Element-ui組件開發(fā)項(xiàng)目。由于最近需要實(shí)現(xiàn)國(guó)際化功能，所以下面這篇文章主要介紹了vue項(xiàng)目國(guó)際化vue-i18n的使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2018-03-03
Vue 使用一種基于 HTML 的模板語法，使我們能夠聲明式地將其組件實(shí)例的數(shù)據(jù)綁定到呈現(xiàn)的 DOM 上，這篇文章主要介紹了Vue3?中的模板語法,需要的朋友可以參考下2023-03-03
使用Vue3實(shí)現(xiàn)羊了個(gè)羊的算法
這篇文章主要介紹了使用Vue3實(shí)現(xiàn)羊了個(gè)羊的算法,初始化的隨機(jī)位置算法，通過實(shí)例代碼介紹了計(jì)算偏移量的方法，代碼簡(jiǎn)單易懂，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-09-09
element中Steps步驟條和Tabs標(biāo)簽頁(yè)關(guān)聯(lián)的解決
這篇文章主要介紹了element中Steps步驟條和Tabs標(biāo)簽頁(yè)關(guān)聯(lián)的解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue router解決路由帶參數(shù)跳轉(zhuǎn)時(shí)出現(xiàn)404問題
我的頁(yè)面是從一個(gè)vue頁(yè)面router跳轉(zhuǎn)到另一個(gè)vue頁(yè)面,并且利用windows.open() 瀏覽器重新創(chuàng)建一個(gè)頁(yè)簽,但是不知道為什么有時(shí)候可以有時(shí)候又不行,所以本文給大家介紹了vue router解決路由帶參數(shù)跳轉(zhuǎn)時(shí)出現(xiàn)404問題,需要的朋友可以參考下2024-03-03
這篇文章主要為大家詳細(xì)介紹了用Vue封裝導(dǎo)航欄組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue中的異步組件函數(shù)實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue中的異步組件函數(shù)實(shí)現(xiàn)代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07