Vue學(xué)習(xí)筆記進(jìn)階篇之vue-router安裝及使用方法
介紹
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁面應(yīng)用。vue的單頁面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問路徑，并將路徑和組件映射起來。傳統(tǒng)的頁面應(yīng)用，是用一些超鏈接來實(shí)現(xiàn)頁面切換和跳轉(zhuǎn)的。在vue-router單頁面應(yīng)用中，則是路徑之間的切換，也就是組件的切換。
本文是基于上一篇文章（Vue學(xué)習(xí)筆記進(jìn)階篇——vue-cli安裝及介紹 ）vue-cli腳手架工具的。
安裝
在終端通過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è)組件我們只是作為示例來使用，所以比較簡單，代碼分別如下:
DemoHome.vue:
<template>
<div id="home">
<h2>this is home</h2>
</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">
<h2>this is about</h2>
</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">
<h2>this is contact</h2>
</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í)，所以我們簡單的做個(gè)布局。接下來，我會(huì)再創(chuàng)建兩個(gè)組件，一個(gè)叫DemoHeader, 一個(gè)叫DemoFooter。DemoHeader里面我放一個(gè)logo的圖片，和導(dǎo)航，而這個(gè)導(dǎo)航的路由也將會(huì)使用我們前面定義的路由；DemoFooter就比較簡單了，放一些footer信息。
下面我們看下這兩個(gè)組件的代碼：
DemoHeader.vue:
<template>
<div id="header" class="wrap">
<div class="header">
<h1 class="logo">
<router-link to="/">
</router-link>
</h1>
</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 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è)簡單的淡入淡出的樣式：
.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)于
聯(lián)系方式
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue.js中自定義Markdown插件實(shí)現(xiàn)References解析(推薦)
本文主要寫的是,如何編寫一個(gè)插件來解析<references>標(biāo)簽,并將其轉(zhuǎn)換為HTML,這種方法可以應(yīng)用于其他自定義標(biāo)簽和功能,為Vue.js應(yīng)用程序中的Markdown渲染提供了極大的靈活性,感興趣的朋友跟隨小編一起看看吧2024-07-07
vue實(shí)現(xiàn)離線地圖+leaflet+高德瓦片的詳細(xì)代碼
這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)離線地圖+leaflet+高德瓦片的詳細(xì)代碼,Vue Leaflet是一種結(jié)合了Vue框架和Leaflet庫的前端技術(shù),用于展示和操作天地圖,需要的朋友可以參考下2023-10-10
詳解vue-router的Import異步加載模塊問題的解決方案
這篇文章主要介紹了詳解vue-router的Import異步加載模塊問題的解決方案，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
前端本地存儲(chǔ)方案localForage在vue3中使用方法
localForage是前端本地存儲(chǔ)的庫,支持多種存儲(chǔ)后端,并提供了一致的API來存儲(chǔ)和檢索數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于前端本地存儲(chǔ)方案localForage在vue3中使用的相關(guān)資料,需要的朋友可以參考下2024-09-09
VUE PC端可拖動(dòng)懸浮按鈕的實(shí)現(xiàn)代碼
這篇文章主要介紹了VUE PC端可拖動(dòng)懸浮按鈕的實(shí)現(xiàn)代碼,通過實(shí)例代碼介紹了父頁面引用的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
Vue.js中,computed屬性根據(jù)依賴進(jìn)行緩存,只有依賴改變時(shí)才重新計(jì)算,這樣有效提高性能,computed屬性是響應(yīng)式的,可以自動(dòng)更新,并且默認(rèn)是只讀的,它與methods的主要區(qū)別在于計(jì)算屬性具有緩存性,而方法每次調(diào)用都會(huì)執(zhí)行,使用computed可以使模板更加簡潔,提高應(yīng)用性能2024-09-09
vue使用rem實(shí)現(xiàn) 移動(dòng)端屏幕適配
這篇文章主要介紹了vue使用rem實(shí)現(xiàn) 移動(dòng)端屏幕適配的相關(guān)知識(shí)，通過實(shí)例代碼介紹了vue用rem布局的實(shí)現(xiàn)代碼,需要的朋友可以參考下2018-09-09
vue-cli4項(xiàng)目開啟eslint保存時(shí)自動(dòng)格式問題
這篇文章主要介紹了vue-cli4項(xiàng)目開啟eslint保存時(shí)自動(dòng)格式的問題小結(jié)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
如何用Vite構(gòu)建工具快速創(chuàng)建Vue項(xiàng)目
Vite是一個(gè)web開發(fā)構(gòu)建工具,由于其原生?ES?模塊導(dǎo)入方法,它允許快速提供代碼,下面這篇文章主要給大家介紹了關(guān)于如何用Vite構(gòu)建工具快速創(chuàng)建Vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2022-05-05![vue模塊導(dǎo)入報(bào)錯(cuò)問題Module not found: Error:[CaseSensitivePathsPlugin]](http://img.jbzj.com/images/xgimg/bcimg9.png)
vue模塊導(dǎo)入報(bào)錯(cuò)問題Module not found: Error:[CaseSensi
這篇文章主要介紹了vue模塊導(dǎo)入報(bào)錯(cuò)問題Module not found: Error:[CaseSensitivePathsPlugin]，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06