小編給大家分享一下vue-router安裝及使用的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
創(chuàng)新互聯(lián)是專業(yè)的秦州網(wǎng)站建設(shè)公司,秦州接單;提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行秦州網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!
安裝
在終端通過cd命令進(jìn)入到上一篇文章中創(chuàng)建的my-demo1項(xiàng)目目錄里,然后使用以下命令進(jìn)行安裝:
npm install vue-router --save
--save參數(shù)的作用是在我們的包配置文件package.json文件中添加對(duì)應(yīng)的配置。安裝成功后, 可以查看package.json文件,你會(huì)發(fā)現(xiàn)多了"vue-router": "^2.7.0"的配置。如下:
"dependencies": { "vue": "^2.3.3", "vue-router": "^2.7.0" },
使用
通過以上步驟,我們已經(jīng)安裝好了vue-router,但是在vue-cli中我們?nèi)绾问褂媚兀?br/>首先,我們需要在main.js文件中導(dǎo)入并注冊(cè)vue-router:
//ES6語法導(dǎo)入 import VueRouter from 'vue-router' //注冊(cè) Vue.use(VueRouter)
然后便是實(shí)例化:
const router = new VueRouter({ mode: 'history', routes:[ {path: '/', component:DemoHome}, {path: '/about', component:DemoAbout}, {path: '/contact', component:DemoContact} ] })
path: 是路由的路徑。
component: 是該路由需要渲染的組件。
上面代碼中的DemoHome, DemoAbout, DemoContact都是單文件組件,所以我們同樣需要?jiǎng)?chuàng)建上面三個(gè)組件,并導(dǎo)入到當(dāng)前文件。這三個(gè)組件我們只是作為示例來使用,所以比較簡(jiǎn)單,代碼分別如下:
DemoHome.vue:
<template> <div id="home"> <h3>this is home</h3> </div> </template> <script> export default({ name:'home' }) </script> <style scoped> #home{ width: 100%; height: 500px; background-color: khaki; } </style>
DemoAbout.vue:
<template> <div id="about"> <h3>this is about</h3> </div> </template> <script> export default({ name:'about' }) </script> <style scoped> #about{ width: 100%; height: 500px; background-color: antiquewhite; } </style>
DemoContact.vue:
<template> <div id="contact"> <h3>this is contact</h3> </div> </template> <script> export default({ name:'contact' }) </script> <style scoped> #contact{ width: 100%; height: 500px; background-color: lightskyblue; } </style>
創(chuàng)建好以上組件后,再使用ES6語法導(dǎo)入到main.js:
import DemoHome from './components/DemoHome' import DemoAbout from './components/DemoAbout' import DemoContact from './components/DemoContact'
最后在Vue實(shí)例中加入路由屬性就可以了
new Vue({ el: '#app', router, template: '<App/>', components: { App } })
完整的main.js應(yīng)該是這樣:
import Vue from 'vue' import VueRouter from 'vue-router' import App from './App' import DemoHome from './components/DemoHome' import DemoAbout from './components/DemoAbout' import DemoContact from './components/DemoContact' Vue.use(VueRouter) Vue.config.productionTip = false const router = new VueRouter({ mode: 'history', routes:[ {path: '/', component:DemoHome}, {path: '/about', component:DemoAbout}, {path: '/contact', component:DemoContact} ] }) /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App } })
在這里我們?yōu)榱藢W(xué)習(xí),所以我們簡(jiǎn)單的做個(gè)布局。接下來,我會(huì)再創(chuàng)建兩個(gè)組件,一個(gè)叫DemoHeader, 一個(gè)叫DemoFooter。DemoHeader里面我放一個(gè)logo的圖片,和導(dǎo)航,而這個(gè)導(dǎo)航的路由也將會(huì)使用我們前面定義的路由;DemoFooter就比較簡(jiǎn)單了,放一些footer信息。
下面我們看下這兩個(gè)組件的代碼:
DemoHeader.vue:
<template> <div id="header" class="wrap"> <div class="header"> <h2 class="logo"> <router-link to="/">  </router-link> </h2> </div> <div class="top-nav"> <div id="navList" class="navlist-wrap"> <div class="navlist clearfix"> <span class="nav-btn"> <router-link to="/">首頁</router-link> </span> <span class="nav-btn"> <router-link to="/about">關(guān)于</router-link> </span> <span class="nav-btn"> <router-link to="/contact">聯(lián)系方式</router-link> </span> </div> </div> </div> </div> </template> <script> export default({ name:'header', data:function () { return { 'nav-btn': 'nav-btn' } } }) </script> <style scoped> .header{width:1105px;margin:0 auto;height:111px;padding:12px 0 18px;position:relative;*z-index:1} .header .logo{height:86px;width:256px;margin-top:25px} .top-nav .navlist-wrap{width:1050px;margin:0 auto;position:relative} .top-nav .navlist{position:absolute;right:130PX;top:-40PX} .top-nav .navlist .nav-btn { float:left; margin-left:60px; color:#666; vertical-align: middle; text-decoration:none; font-size: large; } </style>
在上面的代碼中,我們看到了一個(gè)陌生的標(biāo)簽,<router-link>這個(gè)是什么玩意呢?其實(shí)他就是vue-router集成的一個(gè)組件,渲染出來的是一個(gè)<a>標(biāo)簽。而他的屬性to其實(shí)就是一個(gè)props屬性,這里面的意思就是路由的路徑,與前面定義的路由path對(duì)應(yīng)。關(guān)于router-link的更多介紹可以看官網(wǎng)router-link API文檔
DemoFooter.vue:
<template> <div id="footer"> <span>Copyright © <a href="http://www.chairis.cn" rel="external nofollow" >Chain</a>. All rights reserved</span> </div> </template> <script> export default({ name:'footer' }) </script> <style scoped> #footer { height:50px; position:fixed; bottom:0px; left: 0px; background-color: #eeeeee; width: 100%; padding-top: 10px; } </style>
我們的組件都已經(jīng)創(chuàng)建好了,接下來的事情就是把他們組合到一起。這個(gè)組合,我們就用App.vue來實(shí)現(xiàn)吧。
先整理下我們的思路啊:
在我們的頁面上,我們需要把DemoHeader, DemoFooter放進(jìn)去,而我們的DemoHeader里面定義了導(dǎo)航,我們希望把導(dǎo)航出來的組件放到header和footer之間。所以大致應(yīng)該是這個(gè)樣組合:
<demo-header></demo-header> <!-- 根據(jù)路由顯示的組件 --> <!-- TO DO --> <demo-footer></demo-footer>
下面看下完整的代碼吧:
<template> <div id="app"> <demo-header></demo-header> <router-view></router-view> <demo-footer></demo-footer> </div> </template> <script> import DemoHeader from './components/DemoHeader' import DemoFooter from './components/DemoFooter' export default { name: 'app', components: { DemoHeader, DemoFooter } } </script> <style> #app { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; background-color: aliceblue; } </style>
同樣的道理,我們要是想使用一個(gè)組件,導(dǎo)入和注冊(cè)的步驟是少不了的。
導(dǎo)入:
import DemoHeader from './components/DemoHeader' import DemoFooter from './components/DemoFooter'
注冊(cè):
components: { DemoHeader, DemoFooter }
在上面的代碼中我們又發(fā)現(xiàn)了個(gè)陌生標(biāo)簽<router-view>這個(gè)標(biāo)簽同樣是vue-router的一個(gè)內(nèi)部組件,實(shí)際上它是一個(gè)是一個(gè) functional 組件。具體信息可以去官網(wǎng)router-viewAPI文檔詳細(xì)了解。它的作用就是渲染路由導(dǎo)航過來的組件,也就是這個(gè)標(biāo)簽內(nèi)就是我們放置DemoHome, DemoAbout, DemoContact的地方。
因?yàn)樗彩莻€(gè)組件,所以可以配合 <transition> 和 <keep-alive> 使用。如果兩個(gè)結(jié)合一起用,要確保在內(nèi)層使用 <keep-alive>, 添加上述兩個(gè)標(biāo)簽后的template代碼如下:
<template> <div id="app"> <demo-header></demo-header> <transition name="fade" mode="out-in"> <keep-alive> <router-view></router-view> </keep-alive> </transition> <demo-footer></demo-footer> </div> </template>
再添加一個(gè)簡(jiǎn)單的淡入淡出的樣式:
.fade-enter-active, .fade-leave-active{ transition: all .3s; } .fade-enter, .fade-leave-to{ opacity: 0; }
通過上面的代碼,我們發(fā)現(xiàn)之前學(xué)過的過渡這里都可以使用,可參考Vue學(xué)習(xí)筆記進(jìn)階篇——單元素過度
最后我們看下我們做了半天的成果吧:
首頁
關(guān)于
以上是“vue-router安裝及使用的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)站題目:vue-router安裝及使用的示例分析
文章地址:http://www.chinadenli.net/article14/gciege.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供標(biāo)簽優(yōu)化、網(wǎng)站營銷、、企業(yè)建站、網(wǎng)站排名、品牌網(wǎng)站設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)