介紹
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構建單頁面應用。vue的單頁面應用是基于路由和組件的，路由用于設定訪問路徑，并將路徑和組件映射起來。傳統的頁面應用，是用一些超鏈接來實現頁面切換和跳轉的。在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。
本文是基于上一篇文章（Vue學習筆記進階篇――vue-cli安裝及介紹 ）vue-cli腳手架工具的。
安裝
在終端通過cd命令進入到上一篇文章中創建的my-demo1項目目錄里，然后使用以下命令進行安裝:
npm install vue-router --save
--save參數的作用是在我們的包配置文件package.json文件中添加對應的配置。安裝成功后， 可以查看package.json文件，你會發現多了"vue-router": "^2.7.0"的配置。如下：
"dependencies": { "vue": "^2.3.3", "vue-router": "^2.7.0" },使用
通過以上步驟，我們已經安裝好了vue-router，但是在vue-cli中我們如何使用呢？
首先，我們需要在main.js文件中導入并注冊vue-router:
//ES6語法導入import VueRouter from 'vue-router'//注冊Vue.use(VueRouter)
然后便是實例化：
const router = new VueRouter({ mode: 'history', routes:[ {path: '/', component:DemoHome}, {path: '/about', component:DemoAbout}, {path: '/contact', component:DemoContact} ]})path: 是路由的路徑。
component: 是該路由需要渲染的組件。
上面代碼中的DemoHome, DemoAbout, DemoContact都是單文件組件，所以我們同樣需要創建上面三個組件，并導入到當前文件。這三個組件我們只是作為示例來使用，所以比較簡單，代碼分別如下:
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>創建好以上組件后，再使用ES6語法導入到main.js:
import DemoHome from './components/DemoHome'import DemoAbout from './components/DemoAbout'import DemoContact from './components/DemoContact'
最后在Vue實例中加入路由屬性就可以了
new Vue({ el: '#app', router, template: '<App/>', components: { App }})完整的main.js應該是這樣：
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 = falseconst 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 }})在這里我們為了學習，所以我們簡單的做個布局。接下來，我會再創建兩個組件，一個叫DemoHeader, 一個叫DemoFooter。DemoHeader里面我放一個logo的圖片，和導航，而這個導航的路由也將會使用我們前面定義的路由；DemoFooter就比較簡單了，放一些footer信息。
下面我們看下這兩個組件的代碼：
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">關于</router-link> </span> <span class="nav-btn"> <router-link to="/contact">聯系方式</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>在上面的代碼中，我們看到了一個陌生的標簽，<router-link>這個是什么玩意呢？其實他就是vue-router集成的一個組件，渲染出來的是一個<a>標簽。而他的屬性to其實就是一個props屬性，這里面的意思就是路由的路徑，與前面定義的路由path對應。關于router-link的更多介紹可以看官網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>我們的組件都已經創建好了，接下來的事情就是把他們組合到一起。這個組合，我們就用App.vue來實現吧。
先整理下我們的思路啊：
在我們的頁面上，我們需要把DemoHeader, DemoFooter放進去，而我們的DemoHeader里面定義了導航，我們希望把導航出來的組件放到header和footer之間。所以大致應該是這個樣組合：
<demo-header></demo-header> <!-- 根據路由顯示的組件 --> <!-- 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>同樣的道理，我們要是想使用一個組件，導入和注冊的步驟是少不了的。
導入：
import DemoHeader from './components/DemoHeader'import DemoFooter from './components/DemoFooter'
注冊：
components: { DemoHeader, DemoFooter }在上面的代碼中我們又發現了個陌生標簽<router-view>這個標簽同樣是vue-router的一個內部組件，實際上它是一個是一個 functional 組件。具體信息可以去官網router-viewAPI文檔詳細了解。它的作用就是渲染路由導航過來的組件，也就是這個標簽內就是我們放置DemoHome, DemoAbout, DemoContact的地方。
因為它也是個組件，所以可以配合 <transition> 和 <keep-alive> 使用。如果兩個結合一起用，要確保在內層使用 <keep-alive>, 添加上述兩個標簽后的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>
再添加一個簡單的淡入淡出的樣式：
.fade-enter-active, .fade-leave-active{ transition: all .3s;}.fade-enter, .fade-leave-to{ opacity: 0;}通過上面的代碼，我們發現之前學過的過渡這里都可以使用，可參考Vue學習筆記進階篇――單元素過度
最后我們看下我們做了半天的成果吧：
首頁
關于
聯系方式
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
