第1節：Vue-router入門

1、解讀router/index.js文件

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目錄下的Hello.vue組件

Vue.use(Router)  //Vue全局使用Router

export default new Router({
  routes: [              //配置路由，這里是個數組
    {                    //每一個鏈接都是一個對象
      path: '/',         //鏈接路徑
      name: 'Hello',     //路由名稱，
      component: Hello   //對應的組件模板
    }
  ]
})

2、地址欄輸入 http://localhost:8080/#/hi出現一個新的頁面，先來看一下我們希望得到的效果

• 在src/components目錄下，新建 Hi.vue 文件。

• 編寫文件內容，和我們之前講過的一樣，文件要包括三個部分<template><script>和<style>。文件很簡單，只是打印一句話。

<template>
  <div class="hello">
    <h1>{
  
  { msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi, I am JSPang'
    }
  }
}
</script>
<style scoped>
</style>

• 引入 Hi組件：我們在router/index.js文件的上邊引入Hi組件

import Hi from '@/components/Hi'

• 增加路由配置：在router/index.js文件的routes[]數組中，新增加一個對象，代碼如下。

{
  path:'/hi',
  name:'Hi',
  component:Hi
}

通過上面的配置已經可以增加一個新的頁面了。是不是覺的自己的Vue功力一下子就提升了一個檔次。為了方便小伙伴查看，貼出現在的路由配置文件:

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目錄下的Hello.vue組件
import Hi from '@/components/Hi'

Vue.use(Router)  //Vue全局使用Router

export default new Router({
  routes: [              //配置路由，這里是個數組
    {                    //每一個鏈接都是一個對象
      path: '/',         //鏈接路徑
      name: 'Hello',     //路由名稱，
      component: Hello   //對應的組件模板
    },{
      path:'/hi',
      name:'Hi',
      component:Hi
    }
  ]
})

3、router-link制作導航

頁面上需要有個像樣的導航鏈接，我們只要點擊就可以實現頁面內容的變化。制作鏈接需要<router-link>標簽，我們先來看一下它的語法。

<router-link to="/">[顯示字段]</router-link>

• to：是我們的導航路徑，要填寫的是你在router/index.js文件里配置的path值，如果要導航到默認首頁，只需要寫成 to=”/” ，

• [顯示字段] ：就是我們要顯示給用戶的導航名稱，比如首頁 新聞頁。

明白了router-link的基本語法，我們在 src/App.vue文件中的template里加入下面代碼，實現導航。

<p>導航 ：
   <router-link to="/">首頁</router-link>
   <router-link to="/hi">Hi頁面</router-link>
</p>

現在我們訪問頁面，發現已經多出了導航。

第2節：vue-router配置子路由

子路由的情況一般用在一個頁面有他的基礎模版，然后它下面的頁面都隸屬于這個模版，只是部分改變樣式。我們接著第一節課的實例，在Hi頁面的下面新建兩個子頁面，分別是 “Hi頁面1” 和 “Hi頁面2”，來實現子路由。

1、改造App.vue的導航代碼

用<router-link>標簽增加了兩個新的導航鏈接。

App.vue代碼

<p>導航 ：
      <router-link to="/">首頁</router-link> |
      <router-link to="/hi">Hi頁面</router-link> |
      <router-link to="/hi/hi1">-Hi頁面1</router-link> |
      <router-link to="/hi/hi2">-Hi頁面2</router-link>
</p>

這時候我們再訪問主頁的時候導航欄就發生了變化。多出了兩個自導航：Hi頁面1 和 Hi頁面2

2、改寫components/Hi.vue頁面

把Hi.vue改成一個通用的模板，加入<router-view>標簽，給子模板提供插入位置。“Hi頁面1” 和 “Hi頁面2” 都相當于“Hi頁面”的子頁面，有點像繼承關系。我們在“Hi頁面”里加入<router-view>標簽。

components/Hi.vue,就是第5行的代碼，其他代碼不變。

<template>
  <div class="hello">
    <h1>{
  
  { msg }}</h1>
    <router-view class="aaa"></router-view>
  </div>
</template>
<script>
export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi, I am JSPang'
    }
  }
}
</script>
<style scoped>
</style>

3、在components目錄下新建兩個組件模板 Hi1.vue 和 Hi2.vue

新建的模板和Hi.vue沒有太多的差別，知識改變了data中message的值，也就是輸出的結果不太一樣了。

<!-- Hi1.vue -->
<template>
  <div class="hello">
    <h1>{
  
  { msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi, I am Hi1!'
    }
  }
}
</script>
<style scoped>
</style>

<!-- Hi2.vue -->
<template>
  <div class="hello">
    <h1>{
  
  { msg }}</h1>
  </div>
</template>
<script>
export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi, I am Hi2'
    }
  }
}
</script>
<style scoped>
</style>

4、修改router/index.js代碼

我們現在導航有了，母模板和子模板也有了，只要改變我們的路由配置文件就可以了。子路由的寫法是在原有的路由配置下加入children字段。

children:[
    {path:'/',component:xxx},
    {path:'xx',component:xxx},
]

children字段后邊跟的是個數組，數組里和其他配置路由基本相同，需要配置path和component。具體看一下這個子路由的配置寫法。

import Vue from 'vue'   
import Router from 'vue-router'  
import Hello from '@/components/Hello'  
import Hi from '@/components/Hi'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'
Vue.use(Router)
export default new Router({
  routes: [             
    {                    
      path: '/',        
      name: 'Hello',     
      component: Hello   
    },{
      path:'/hi',
      component:Hi,
      children:[
        {path:'/',component:Hi},
        {path:'hi1',component:Hi1},
        {path:'hi2',component:Hi2},
      ]
    }
  ]
})

需要注意的是，在配置路由文件前，需要先用import引入Hi1和Hi2。

第3節：vue-router如何參數傳遞

我們先想象一個基本需求，就是在我們點擊導航菜單時，跳轉頁面上能顯示出當前頁面的路徑，來告訴用戶你想在所看的頁面位置（類似于面包屑導航）。

1、用name傳遞參數

前兩節課一直出現name的選項，但是我們都沒有講，這節課我們講name的一種作用，傳遞參數。接著上節課的程序繼續編寫。

兩步完成用name傳值并顯示在模板里：

1. 在路由文件src/router/index.js里配置name屬性。

routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
]

2. 模板里(src/App.vue)用$route.name的形勢接收，比如直接在模板中顯示：

<p>{
  
  { $route.name}}</p>

2、通過<router-link> 標簽中的to傳參

用<router-link>標簽中的to屬性進行傳參，需要您注意的是這里的to要進行一個綁定，寫成:to。先來看一下這種傳參方法的基本語法：

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

這里的to前邊是帶冒號的，然后后邊跟的是一個對象形勢的字符串.

• name：就是我們在路由配置文件中起的name值。

• params：就是我們要傳的參數，它也是對象形勢，在對象里可以傳遞多個值。

了解基本的語法后，我們改造一下我們的src/App.vue里的<router-link>標簽,我們把hi1頁面的<router-link>進行修改。

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

把src/reouter/index.js文件里給hi1配置的路由起個name,就叫hi1.

{path:'/hi1',name:'hi1',component:Hi1},

最后在模板里(src/components/Hi1.vue)用$route.params.username進行接收.

{
  
  { $route.params.username }}

第4節：單頁面多路由區域操作

需求是這樣的，在一個頁面里我們有2個以上<router-view>區域，我們通過配置路由的js文件，來操作這些區域的內容。例如我們在src/App.vue里加上兩個<router-view>標簽。我們用vue-cli建立了新的項目，并打開了src目錄下的App.vue文件，在<router-view>下面新寫了兩行<router-view>標簽,并加入了些CSS樣式。

<router-view ></router-view>
<router-view name="left" ></router-view>
<router-view name="right" ></router-view>

現在的頁面中有了三個<router-view>標簽，也就是說我們需要在路由里配置這三個區域，配置主要是在components字段里進行。

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      components: {
        default:Hello,
        left:Hi1,
        right:Hi2
      }
    },{
      path: '/Hi',
      components: {
        default:Hello,
        left:Hi2,
        right:Hi1
      }
    }
  ]
})

上邊的代碼我們編寫了兩個路徑，一個是默認的‘/’，另一個是’/Hi’.在兩個路徑下的components里面，我們對三個區域都定義了顯示內容。

定義好后，我們需要在component文件夾下，新建Hi1.vue和Hi2.vue頁面就可以了。

<!-- Hi1.vue -->
<template>
    <div>
        <h2>{
  
  { msg }}</h2>
    </div>
</template>
<script>
export default {
  name: 'hi1',
  data () {
    return {
      msg: 'I am Hi1 page.'
    }
  }
}
</script>

<!-- Hi2.vue -->
<template>
    <div>
        <h2>{
  
  { msg }}</h2>
    </div>
</template>
<script>
export default {
  name: 'hi2',
  data () {
    return {
      msg: 'I am Hi2 page.'
    }
  }
}
</script>

最后在App.vue中配置我們的<router-link>就可以了

<router-link to="/">首頁</router-link>
<router-link to="/hi">Hi頁面</router-link>

第5節：vue-router 利用url傳遞參數

我們在第3節雖然已經學會傳遞參數，但是我們這些老程序員的情懷還是利用url來傳值，因為我們以前在前后端沒有分開開發的時候，經常這樣做。在實際開發也是有很多用URL傳值的需求，比如我們在新聞列表中有很多新聞標題整齊的排列，我們需要點擊每個新聞標題打開不同的新聞內容，這時在跳轉路由時跟上新聞編號就十分實用。

1、:冒號的形式傳遞參數

• 在配置文件里以冒號的形式設置參數。我們在/src/router/index.js文件里配置路由。

{
    path:'/params/:newsId/:newsTitle',
     component:Params
}

我們需要傳遞參數是新聞ID（newsId）和新聞標題（newsTitle）.所以我們在路由配置文件里制定了這兩個值。

• 在src/components目錄下建立我們params.vue組件，也可以說是頁面。我們在頁面里輸出了url傳遞的的新聞ID和新聞標題。

<template>
    <div>
        <h2>{
  
  { msg }}</h2>
        <p>新聞ID：{
  
  { $route.params.newsId}}</p>
        <p>新聞標題：{
  
  { $route.params.newsTitle}}</p>
    </div>
</template>
<script>
export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  }
}
</script>

• 在App.vue文件里加入我們的<router-view>標簽。這時候我們可以直接利用url傳值了。

<router-link to="/params/198/jspang website is very good">params</router-link>

2、正則表達式在URL傳值中的應用

上邊的例子，我們傳遞了新聞編號，現在需求升級了，我們希望我們傳遞的新聞ID只能是數字的形式，這時候我們就需要在傳遞時有個基本的類型判斷，vue是支持正則的。

加入正則需要在路由配置文件里（/src/router/index.js）以圓括號的形式加入。

path:'/params/:newsId(\\d+)/:newsTitle',

加入了正則，我們再傳遞數字之外的其他參數，params.vue組件就沒有辦法接收到。

第6節：vue-router 的重定向-redirect

開發中有時候我們雖然設置的路徑不一致，但是我們希望跳轉到同一個頁面，或者說是打開同一個組件。這時候我們就用到了路由的重新定向redirect參數。

1、redirect基本重定向

我們只要在路由配置文件中（/src/router/index.js）把原來的component換成redirect參數就可以了。我們來看一個簡單的配置。

export default new Router({
  routes: [
    {
      path: '/',
      component: Hello
    },{
      path:'/params/:newsId(\\d+)/:newsTitle',
      component:Params
    },{
      path:'/goback',
      redirect:'/'
    }
  ]
})

這里我們設置了goback路由，但是它并沒有配置任何component（組件），而是直接redirect到path:’/’下了，這就是一個簡單的重新定向。

2、重定向時傳遞參數

我們已經學會了通過url來傳遞參數，那我們重定向時如果也需要傳遞參數怎么辦？其實vue也已經為我們設置好了，我們只需要在ridirect后邊的參數里復制重定向路徑的path參數就可以了。可能你看的有點暈，我們來看一段代碼：

{
  path:'/params/:newsId(\\d+)/:newsTitle',
  component:Params
},{
  path:'/goParams/:newsId(\\d+)/:newsTitle',
  redirect:'/params/:newsId(\\d+)/:newsTitle'
}

已經有了一個params路由配置，我們在設置一個goParams的路由重定向，并傳遞了參數。這時候我們的路由參數就可以傳遞給params.vue組件了。參數接收方法和正常的路由接收方法一樣。

第7節：alias別名的使用

上節學習了路由的重定向，我相信大家已經可以熟練使用redirect進行重定向了。使用alias別名的形式，我們也可以實現類似重定向的效果。

1.首先我們在路由配置文件里（/src/router/index.js），給上節課的Home路徑起一個別名，jspang。

{
    path: '/hi1',
    component: Hi1,
    alias:'/jspang'
}

2.配置我們的<router-link>，起過別名之后，可以直接使用<router-link>標簽里的to屬性，進行重新定向。

<router-link to="/jspang">jspang</router-link>

redirect和alias的區別

• redirect：仔細觀察URL，redirect是直接改變了url的值，把url變成了真實的path路徑。

• alias：URL路徑沒有別改變，這種情況更友好，讓用戶知道自己訪問的路徑，只是改變了<router-view>中的內容。

• 『重定向』的意思是，當用戶訪問/a時，URL 將會被替換成/b，然后匹配路由為/b

• /a的別名是/b，意味著，當用戶訪問/b時，URL 會保持為/b，但是路由匹配則為/a，就像用戶訪問/a一樣。

填個小坑：

別名請不要用在path為’/’中，如下代碼的別名是不起作用的。

{
  path: '/',
  component: Hello,
  alias:'/home'
}

在實際項目中我們遇到了這樣的坑，開始以為是自己的代碼寫的有問題，找了兩個小時作用。后來發現不是代碼問題，只是vue不支持這樣使用。我們犯過錯誤，踩過了坑，希望大家就不要踩了。

第8節：路由的過渡動畫

頁面切換時我們加入一些動畫效果，提升我們程序的動效設計。這節課我們就學習一下路由的過渡動畫效果制作。

<transition>標簽

想讓路由有過渡動畫，需要在<router-view>標簽的外部添加<transition>標簽，標簽還需要一個name屬性。

<transition name="fade">
  <router-view ></router-view>
</transition>

在/src/App.vue文件里添加了<transition>標簽，并給標簽起了一個名字叫fade。

css過渡類名：

組件過渡過程中，會有四個CSS類名進行切換，這四個類名與transition的name屬性有關，比如name=”fade”,會有如下四個CSS類名：

1. fade-enter:進入過渡的開始狀態，元素被插入時生效，只應用一幀后立刻刪除。
2. fade-enter-active:進入過渡的結束狀態，元素被插入時就生效，在過渡過程完成后移除。
3. fade-leave:離開過渡的開始狀態，元素被刪除時觸發，只應用一幀后立刻刪除。
4. fade-leave-active:離開過渡的結束狀態，元素被刪除時生效，離開過渡完成后被刪除。

從上面四個類名可以看出，fade-enter-active和fade-leave-active在整個進入或離開過程中都有效，所以CSS的transition屬性在這兩個類下進行設置。

那我們就在App.vue頁面里加入四種CSS樣式效果，并利用CSS3的transition屬性控制動畫的具體效果。代碼如下：

.fade-enter {
  opacity:0;
}
.fade-leave{
  opacity:1;
}
.fade-enter-active{
  transition:opacity .5s;
}
.fade-leave-active{
  opacity:0;
  transition:opacity .5s;
}

上邊的代碼設置了改變透明度的動畫過渡效果，但是默認的mode模式in-out模式，這并不是我們想要的。下面我們學一下mode模式。

過渡模式mode：

// 添加在transition標簽內
in-out: 新元素先進入過渡，完成之后當前元素過渡離開。
out-in: 當前元素先進行過渡離開，離開完成后新元素過渡進入。

這節課只能算是一個簡單的過渡入門，教會大家原理，如果想做出實用酷炫的過渡效果，你需要有較強的動畫制作能力，我們下節課繼續學習動畫的知識。

第9節：mode的設置和404頁面的處理

在學習過渡效果的時候，我們學了mode的設置，但是在路由的屬性中還有一個mode。這節課我們就學習一下另一個mode模式和404頁面的設置。

mode的兩個值

1. histroy:當你使用 history 模式時，URL 就像正常的 url，例如 http://jsapng.com/lms/，也好看！

2. hash:默認’hash’值，但是hash看起來就像無意義的字符排列，不太好看也不符合我們一般的網址瀏覽習慣。

具體的效果我在視頻中會有所掩飾，不理解的小伙伴可以到視頻中進行查看。

404頁面的設置：

用戶會經常輸錯頁面，當用戶輸錯頁面時，我們希望給他一個友好的提示，為此美工都會設計一個漂亮的頁面，這個頁面就是我們常說的404頁面。vue-router也為我們提供了這樣的機制.

1.設置我們的路由配置文件（/src/router/index.js）：

{
   path:'*',
   component:Error
}

這里的path:’*’就是找不到頁面時的配置，component是我們新建的一個Error.vue的文件。

2.新建404頁面：

在/src/components/文件夾下新建一個Error.vue的文件。簡單輸入一些有關錯誤頁面的內容。

<template>
    <div>
        <h2>{
  
  { msg }}</h2>
    </div>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Error:404'
    }
  }
}
</script>

3.我們在用<router-link>瞎寫一個標簽的路徑。

<router-link to="/bbbbbb">我是瞎寫的</router-link>

第10節：路由中的鉤子

一個組件從進入到銷毀有很多的鉤子函數，同樣在路由中也設置了鉤子函數。路由的鉤子選項可以寫在路由配置文件中，也可以寫在我們的組件模板中。

路由配置文件中的鉤子函數

我們可以直接在路由配置文件（/src/router/index.js）中寫鉤子函數。但是在路由文件中我們只能寫一個beforeEnter,就是在進入此路由配置時。先來看一段具體的代碼：

{
      path:'/params/:newsId(\\d+)/:newsTitle',
      component:Params,
      beforeEnter:(to, from, next)=>{
        console.log('我進入了params模板');
        console.log(to);
        console.log(from);
        next();
},

我們在params路由里配置了bdforeEnter得鉤子函數，函數我們采用了ES6的箭頭函數，需要傳遞三個參數。我們并在箭頭函數中打印了to和from函數。具體打印內容可以在控制臺查看object。

三個參數：

1. to:路由將要跳轉的路徑信息，信息是包含在對像里邊的。
2. from:路徑跳轉前的路徑信息，也是一個對象的形式。
3. next:路由的控制參數，常用的有next(true)和next(false)。

寫在模板中的鉤子函數

在配置文件中的鉤子函數，只有一個鉤子-beforeEnter，如果我們寫在模板中就可以有兩個鉤子函數可以使用：

• beforeRouteEnter：在路由進入前的鉤子函數。

• beforeRouteLeave：在路由離開前的鉤子函數。

export default {
  name: 'params',
  data () {
    return {
      msg: 'params page'
    }
  },
  beforeRouteEnter:(to,from,next)=>{
    console.log("準備進入路由模板");
    next();
  },
  beforeRouteLeave: (to, from, next) => {
    console.log("準備離開路由模板");
    next();
  }
}
</script>

這是我們寫在params.vue模板里的路由鉤子函數。它可以監控到路由的進入和路由的離開，也可以輕易的讀出to和from的值。

第11節：編程式導航

這是這篇文章的最后一節，前10節課的導航都是用<router-link>標簽或者直接操作地址欄的形式完成的，那如果在業務邏輯代碼中需要跳轉頁面我們如何操作？這就是我們要說的編程式導航，顧名思義，就是在業務邏輯代碼中實現導航。

this.$router.go(-1) 和 this.$router.go(1)

這兩個編程式導航的意思是后退和前進，功能跟我們瀏覽器上的后退和前進按鈕一樣，這在業務邏輯中經常用到。比如條件不滿足時，我們需要后退。

router.go(-1)代表著后退，我們可以讓我們的導航進行后退，并且我們的地址欄也是有所變化的。

1.我們先在app.vue文件里加入一個按鈕，按鈕并綁定一個goback( )方法。

<button @click=”goback”>后退</button>

2.在我們的script模塊中寫入goback()方法，并使用this.$router.go(-1),進行后退操作。

<script>
export default {
  name: 'app',
  methods:{
    goback(){
      this.$router.go(-1);
    }
  }
}
</script>

打開瀏覽器進行預覽，這時我們的后退按鈕就可以向以前的網頁一樣后退了。

router.go(1):代表著前進，用法和后退一樣，我在這里就不重復碼字了（碼字辛苦希望大家理解）。

this.$router.push(‘/xxx ‘)

這個編程式導航都作用就是跳轉，比如我們判斷用戶名和密碼正確時，需要跳轉到用戶中心頁面或者首頁，都用到這個編程的方法來操作路由。

我們設置一個按鈕，點擊按鈕后回到站點首頁。

1.先編寫一個按鈕，在按鈕上綁定goHome( )方法。

<button @click=”goHome”>回到首頁</button>

2.在<script>模塊里加入goHome方法，并用this.$router.push(‘/’)導航到首頁

export default {
  name: 'app',
  methods:{
    goback(){
      this.$router.go(-1);
    },
    goHome(){
      this.$router.push('/');
    }
  }
}

總結：我們利用11節課把vue-router的知識學習了一遍，因為個人能力有限，知識點難免有所遺漏，希望小伙伴們多多諒解，通過這套課程我對vue-router的知識有了更深的了解，對教是最好的學習也體會更深了。

總結

以上是生活随笔為你收集整理的Vue学习笔记——Vue-router「建议收藏」(Router)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。