Vue學習筆記進階篇之vue-router安裝及使用方法

更新時間：2017年07月19日 11:18:02 作者：Chain

本篇文章主要介紹了Vue學習筆記進階篇之vue-router安裝及使用方法，具有一定的參考價值，有興趣的可以了解一下

介紹

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構建單頁面應用。vue的單頁面應用是基于路由和組件的，路由用于設定訪問路徑，并將路徑和組件映射起來。傳統(tǒng)的頁面應用，是用一些超鏈接來實現(xiàn)頁面切換和跳轉的。在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。

本文是基于上一篇文章（Vue學習筆記進階篇——vue-cli安裝及介紹）vue-cli腳手架工具的。

安裝

在終端通過cd命令進入到上一篇文章中創(chuàng)建的my-demo1項目目錄里，然后使用以下命令進行安裝:

npm install vue-router --save

--save參數(shù)的作用是在我們的包配置文件package.json文件中添加對應的配置。安裝成功后，可以查看package.json文件，你會發(fā)現(xiàn)多了"vue-router": "^2.7.0"的配置。如下：

 "dependencies": {
  "vue": "^2.3.3",
  "vue-router": "^2.7.0"
 },

使用

通過以上步驟，我們已經(jīng)安裝好了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都是單文件組件，所以我們同樣需要創(chuàng)建上面三個組件，并導入到當前文件。這三個組件我們只是作為示例來使用，所以比較簡單，代碼分別如下:

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語法導入到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 = 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習，所以我們簡單的做個布局。接下來，我會再創(chuàng)建兩個組件，一個叫DemoHeader, 一個叫DemoFooter。DemoHeader里面我放一個logo的圖片，和導航，而這個導航的路由也將會使用我們前面定義的路由；DemoFooter就比較簡單了，放一些footer信息。

下面我們看下這兩個組件的代碼：

DemoHeader.vue:

<template>
 <div id="header" class="wrap">
  <div class="header">
   <h1 class="logo">
    <router-link to="/">
     ![](../assets/logo.png)
    </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">聯(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>

在上面的代碼中，我們看到了一個陌生的標簽，<router-link>這個是什么玩意呢？其實他就是vue-router集成的一個組件，渲染出來的是一個<a>標簽。而他的屬性to其實就是一個props屬性，這里面的意思就是路由的路徑，與前面定義的路由path對應。關于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)建好了，接下來的事情就是把他們組合到一起。這個組合，我們就用App.vue來實現(xiàn)吧。

先整理下我們的思路?。?br />

在我們的頁面上，我們需要把DemoHeader, DemoFooter放進去，而我們的DemoHeader里面定義了導航，我們希望把導航出來的組件放到header和footer之間。所以大致應該是這個樣組合：

    <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>

同樣的道理，我們要是想使用一個組件，導入和注冊的步驟是少不了的。

導入：

import DemoHeader from './components/DemoHeader'
import DemoFooter from './components/DemoFooter'

注冊：

 components: {
  DemoHeader,
  DemoFooter
 }

在上面的代碼中我們又發(fā)現(xiàn)了個陌生標簽<router-view>這個標簽同樣是vue-router的一個內部組件，實際上它是一個是一個 functional 組件。具體信息可以去官網(wǎng)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;
}

通過上面的代碼，我們發(fā)現(xiàn)之前學過的過渡這里都可以使用，可參考Vue學習筆記進階篇——單元素過度

最后我們看下我們做了半天的成果吧：

首頁

關于

聯(lián)系方式

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue.js中自定義Markdown插件實現(xiàn)References解析(推薦)
本文主要寫的是,如何編寫一個插件來解析<references>標簽,并將其轉換為HTML,這種方法可以應用于其他自定義標簽和功能,為Vue.js應用程序中的Markdown渲染提供了極大的靈活性,感興趣的朋友跟隨小編一起看看吧
2024-07-07
vue實現(xiàn)離線地圖+leaflet+高德瓦片的詳細代碼
這篇文章主要給大家介紹了關于vue實現(xiàn)離線地圖+leaflet+高德瓦片的詳細代碼,Vue Leaflet是一種結合了Vue框架和Leaflet庫的前端技術,用于展示和操作天地圖,需要的朋友可以參考下
2023-10-10
詳解vue-router的Import異步加載模塊問題的解決方案
這篇文章主要介紹了詳解vue-router的Import異步加載模塊問題的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-05-05
前端本地存儲方案localForage在vue3中使用方法
localForage是前端本地存儲的庫,支持多種存儲后端,并提供了一致的API來存儲和檢索數(shù)據(jù),這篇文章主要給大家介紹了關于前端本地存儲方案localForage在vue3中使用的相關資料,需要的朋友可以參考下
2024-09-09
VUE PC端可拖動懸浮按鈕的實現(xiàn)代碼
這篇文章主要介紹了VUE PC端可拖動懸浮按鈕的實現(xiàn)代碼,通過實例代碼介紹了父頁面引用的方法,本文結合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
2024-02-02
Vue.js中computed的基本使用方法
Vue.js中,computed屬性根據(jù)依賴進行緩存,只有依賴改變時才重新計算,這樣有效提高性能,computed屬性是響應式的,可以自動更新,并且默認是只讀的,它與methods的主要區(qū)別在于計算屬性具有緩存性,而方法每次調用都會執(zhí)行,使用computed可以使模板更加簡潔,提高應用性能
2024-09-09
vue使用rem實現(xiàn) 移動端屏幕適配
這篇文章主要介紹了vue使用rem實現(xiàn) 移動端屏幕適配的相關知識，通過實例代碼介紹了vue用rem布局的實現(xiàn)代碼,需要的朋友可以參考下
2018-09-09
vue-cli4項目開啟eslint保存時自動格式問題
這篇文章主要介紹了vue-cli4項目開啟eslint保存時自動格式的問題小結，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-07-07
如何用Vite構建工具快速創(chuàng)建Vue項目
Vite是一個web開發(fā)構建工具,由于其原生?ES?模塊導入方法,它允許快速提供代碼,下面這篇文章主要給大家介紹了關于如何用Vite構建工具快速創(chuàng)建Vue項目的相關資料,需要的朋友可以參考下
2022-05-05
vue模塊導入報錯問題Module not found: Error:[CaseSensi
這篇文章主要介紹了vue模塊導入報錯問題Module not found: Error:[CaseSensitivePathsPlugin]，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-06-06