第1節(jié)：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: [              //配置路由，這里是個(gè)數(shù)組
    {                    //每一個(gè)鏈接都是一個(gè)對(duì)象
      path: '/',         //鏈接路徑
      name: 'Hello',     //路由名稱，
      component: Hello   //對(duì)應(yīng)的組件模板
    }
  ]
})

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

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

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

<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組件：我們?cè)趓outer/index.js文件的上邊引入Hi組件

import Hi from '@/components/Hi'

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

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

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

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: [              //配置路由，這里是個(gè)數(shù)組
    {                    //每一個(gè)鏈接都是一個(gè)對(duì)象
      path: '/',         //鏈接路徑
      name: 'Hello',     //路由名稱，
      component: Hello   //對(duì)應(yīng)的組件模板
    },{
      path:'/hi',
      name:'Hi',
      component:Hi
    }
  ]
})

3、router-link制作導(dǎo)航

頁面上需要有個(gè)像樣的導(dǎo)航鏈接，我們只要點(diǎn)擊就可以實(shí)現(xiàn)頁面內(nèi)容的變化。制作鏈接需要<router-link>標(biāo)簽，我們先來看一下它的語法。

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

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

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

明白了router-link的基本語法，我們?cè)?src/App.vue文件中的template里加入下面代碼，實(shí)現(xiàn)導(dǎo)航。

<p>導(dǎo)航 ：
   <router-link to="/">首頁</router-link>
   <router-link to="/hi">Hi頁面</router-link>
</p>

現(xiàn)在我們?cè)L問頁面，發(fā)現(xiàn)已經(jīng)多出了導(dǎo)航。

第2節(jié)：vue-router配置子路由

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

1、改造App.vue的導(dǎo)航代碼

用<router-link>標(biāo)簽增加了兩個(gè)新的導(dǎo)航鏈接。

App.vue代碼

<p>導(dǎo)航 ：
      <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>

這時(shí)候我們?cè)僭L問主頁的時(shí)候?qū)Ш綑诰桶l(fā)生了變化。多出了兩個(gè)自導(dǎo)航：Hi頁面1 和 Hi頁面2

2、改寫components/Hi.vue頁面

把Hi.vue改成一個(gè)通用的模板，加入<router-view>標(biāo)簽，給子模板提供插入位置。“Hi頁面1” 和 “Hi頁面2” 都相當(dāng)于“Hi頁面”的子頁面，有點(diǎn)像繼承關(guān)系。我們?cè)凇癏i頁面”里加入<router-view>標(biāo)簽。

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目錄下新建兩個(gè)組件模板 Hi1.vue 和 Hi2.vue

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

<!-- 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代碼

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

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

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

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節(jié)：vue-router如何參數(shù)傳遞

我們先想象一個(gè)基本需求，就是在我們點(diǎn)擊導(dǎo)航菜單時(shí)，跳轉(zhuǎn)頁面上能顯示出當(dāng)前頁面的路徑，來告訴用戶你想在所看的頁面位置（類似于面包屑導(dǎo)航）。

1、用name傳遞參數(shù)

前兩節(jié)課一直出現(xiàn)name的選項(xiàng)，但是我們都沒有講，這節(jié)課我們講name的一種作用，傳遞參數(shù)。接著上節(jié)課的程序繼續(xù)編寫。

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

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

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

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

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

2、通過<router-link> 標(biāo)簽中的to傳參

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

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

這里的to前邊是帶冒號(hào)的，然后后邊跟的是一個(gè)對(duì)象形勢(shì)的字符串.

• name：就是我們?cè)诼酚膳渲梦募衅鸬膎ame值。

• params：就是我們要傳的參數(shù)，它也是對(duì)象形勢(shì)，在對(duì)象里可以傳遞多個(gè)值。

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

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

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

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

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

{
  
  { $route.params.username }}

第4節(jié)：?jiǎn)雾撁娑嗦酚蓞^(qū)域操作

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

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

現(xiàn)在的頁面中有了三個(gè)<router-view>標(biāo)簽，也就是說我們需要在路由里配置這三個(gè)區(qū)域，配置主要是在components字段里進(jìn)行。

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
      }
    }
  ]
})

上邊的代碼我們編寫了兩個(gè)路徑，一個(gè)是默認(rèn)的‘/’，另一個(gè)是’/Hi’.在兩個(gè)路徑下的components里面，我們對(duì)三個(gè)區(qū)域都定義了顯示內(nèi)容。

定義好后，我們需要在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節(jié)：vue-router 利用url傳遞參數(shù)

我們?cè)诘?節(jié)雖然已經(jīng)學(xué)會(huì)傳遞參數(shù)，但是我們這些老程序員的情懷還是利用url來傳值，因?yàn)槲覀円郧霸谇昂蠖藳]有分開開發(fā)的時(shí)候，經(jīng)常這樣做。在實(shí)際開發(fā)也是有很多用URL傳值的需求，比如我們?cè)谛侣劻斜碇杏泻芏嘈侣剺?biāo)題整齊的排列，我們需要點(diǎn)擊每個(gè)新聞標(biāo)題打開不同的新聞內(nèi)容，這時(shí)在跳轉(zhuǎn)路由時(shí)跟上新聞編號(hào)就十分實(shí)用。

1、:冒號(hào)的形式傳遞參數(shù)

• 在配置文件里以冒號(hào)的形式設(shè)置參數(shù)。我們?cè)?src/router/index.js文件里配置路由。

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

我們需要傳遞參數(shù)是新聞ID（newsId）和新聞標(biāo)題（newsTitle）.所以我們?cè)诼酚膳渲梦募镏贫诉@兩個(gè)值。

• 在src/components目錄下建立我們params.vue組件，也可以說是頁面。我們?cè)陧撁胬镙敵隽藆rl傳遞的的新聞ID和新聞標(biāo)題。

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

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

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

2、正則表達(dá)式在URL傳值中的應(yīng)用

上邊的例子，我們傳遞了新聞編號(hào)，現(xiàn)在需求升級(jí)了，我們希望我們傳遞的新聞ID只能是數(shù)字的形式，這時(shí)候我們就需要在傳遞時(shí)有個(gè)基本的類型判斷，vue是支持正則的。

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

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

加入了正則，我們?cè)賯鬟f數(shù)字之外的其他參數(shù)，params.vue組件就沒有辦法接收到。

第6節(jié)：vue-router 的重定向-redirect

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

1、redirect基本重定向

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

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

這里我們?cè)O(shè)置了goback路由，但是它并沒有配置任何component（組件），而是直接redirect到path:’/’下了，這就是一個(gè)簡(jiǎn)單的重新定向。

2、重定向時(shí)傳遞參數(shù)

我們已經(jīng)學(xué)會(huì)了通過url來傳遞參數(shù)，那我們重定向時(shí)如果也需要傳遞參數(shù)怎么辦？其實(shí)vue也已經(jīng)為我們?cè)O(shè)置好了，我們只需要在ridirect后邊的參數(shù)里復(fù)制重定向路徑的path參數(shù)就可以了。可能你看的有點(diǎn)暈，我們來看一段代碼：

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

已經(jīng)有了一個(gè)params路由配置，我們?cè)谠O(shè)置一個(gè)goParams的路由重定向，并傳遞了參數(shù)。這時(shí)候我們的路由參數(shù)就可以傳遞給params.vue組件了。參數(shù)接收方法和正常的路由接收方法一樣。

第7節(jié)：alias別名的使用

上節(jié)學(xué)習(xí)了路由的重定向，我相信大家已經(jīng)可以熟練使用redirect進(jìn)行重定向了。使用alias別名的形式，我們也可以實(shí)現(xiàn)類似重定向的效果。

1.首先我們?cè)诼酚膳渲梦募铮?src/router/index.js），給上節(jié)課的Home路徑起一個(gè)別名，jspang。

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

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

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

redirect和alias的區(qū)別

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

• alias：URL路徑?jīng)]有別改變，這種情況更友好，讓用戶知道自己訪問的路徑，只是改變了<router-view>中的內(nèi)容。

• 『重定向』的意思是，當(dāng)用戶訪問/a時(shí)，URL 將會(huì)被替換成/b，然后匹配路由為/b

• /a的別名是/b，意味著，當(dāng)用戶訪問/b時(shí)，URL 會(huì)保持為/b，但是路由匹配則為/a，就像用戶訪問/a一樣。

填個(gè)小坑：

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

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

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

第8節(jié)：路由的過渡動(dòng)畫

頁面切換時(shí)我們加入一些動(dòng)畫效果，提升我們程序的動(dòng)效設(shè)計(jì)。這節(jié)課我們就學(xué)習(xí)一下路由的過渡動(dòng)畫效果制作。

<transition>標(biāo)簽

想讓路由有過渡動(dòng)畫，需要在<router-view>標(biāo)簽的外部添加<transition>標(biāo)簽，標(biāo)簽還需要一個(gè)name屬性。

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

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

css過渡類名：

組件過渡過程中，會(huì)有四個(gè)CSS類名進(jìn)行切換，這四個(gè)類名與transition的name屬性有關(guān)，比如name=”fade”,會(huì)有如下四個(gè)CSS類名：

1. fade-enter:進(jìn)入過渡的開始狀態(tài)，元素被插入時(shí)生效，只應(yīng)用一幀后立刻刪除。
2. fade-enter-active:進(jìn)入過渡的結(jié)束狀態(tài)，元素被插入時(shí)就生效，在過渡過程完成后移除。
3. fade-leave:離開過渡的開始狀態(tài)，元素被刪除時(shí)觸發(fā)，只應(yīng)用一幀后立刻刪除。
4. fade-leave-active:離開過渡的結(jié)束狀態(tài)，元素被刪除時(shí)生效，離開過渡完成后被刪除。

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

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

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

上邊的代碼設(shè)置了改變透明度的動(dòng)畫過渡效果，但是默認(rèn)的mode模式in-out模式，這并不是我們想要的。下面我們學(xué)一下mode模式。

過渡模式mode：

// 添加在transition標(biāo)簽內(nèi)
in-out: 新元素先進(jìn)入過渡，完成之后當(dāng)前元素過渡離開。
out-in: 當(dāng)前元素先進(jìn)行過渡離開，離開完成后新元素過渡進(jìn)入。

這節(jié)課只能算是一個(gè)簡(jiǎn)單的過渡入門，教會(huì)大家原理，如果想做出實(shí)用酷炫的過渡效果，你需要有較強(qiáng)的動(dòng)畫制作能力，我們下節(jié)課繼續(xù)學(xué)習(xí)動(dòng)畫的知識(shí)。

第9節(jié)：mode的設(shè)置和404頁面的處理

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

mode的兩個(gè)值

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

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

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

404頁面的設(shè)置：

用戶會(huì)經(jīng)常輸錯(cuò)頁面，當(dāng)用戶輸錯(cuò)頁面時(shí)，我們希望給他一個(gè)友好的提示，為此美工都會(huì)設(shè)計(jì)一個(gè)漂亮的頁面，這個(gè)頁面就是我們常說的404頁面。vue-router也為我們提供了這樣的機(jī)制.

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

{
   path:'*',
   component:Error
}

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

2.新建404頁面：

在/src/components/文件夾下新建一個(gè)Error.vue的文件。簡(jiǎn)單輸入一些有關(guān)錯(cuò)誤頁面的內(nèi)容。

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

3.我們?cè)谟?lt;router-link>瞎寫一個(gè)標(biāo)簽的路徑。

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

第10節(jié)：路由中的鉤子

一個(gè)組件從進(jìn)入到銷毀有很多的鉤子函數(shù)，同樣在路由中也設(shè)置了鉤子函數(shù)。路由的鉤子選項(xiàng)可以寫在路由配置文件中，也可以寫在我們的組件模板中。

路由配置文件中的鉤子函數(shù)

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

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

我們?cè)趐arams路由里配置了bdforeEnter得鉤子函數(shù)，函數(shù)我們采用了ES6的箭頭函數(shù)，需要傳遞三個(gè)參數(shù)。我們并在箭頭函數(shù)中打印了to和from函數(shù)。具體打印內(nèi)容可以在控制臺(tái)查看object。

三個(gè)參數(shù)：

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

寫在模板中的鉤子函數(shù)

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

• beforeRouteEnter：在路由進(jìn)入前的鉤子函數(shù)。

• beforeRouteLeave：在路由離開前的鉤子函數(shù)。

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

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

第11節(jié)：編程式導(dǎo)航

這是這篇文章的最后一節(jié)，前10節(jié)課的導(dǎo)航都是用<router-link>標(biāo)簽或者直接操作地址欄的形式完成的，那如果在業(yè)務(wù)邏輯代碼中需要跳轉(zhuǎn)頁面我們?nèi)绾尾僮鳎窟@就是我們要說的編程式導(dǎo)航，顧名思義，就是在業(yè)務(wù)邏輯代碼中實(shí)現(xiàn)導(dǎo)航。

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

這兩個(gè)編程式導(dǎo)航的意思是后退和前進(jìn)，功能跟我們?yōu)g覽器上的后退和前進(jìn)按鈕一樣，這在業(yè)務(wù)邏輯中經(jīng)常用到。比如條件不滿足時(shí)，我們需要后退。

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

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

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

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

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

打開瀏覽器進(jìn)行預(yù)覽，這時(shí)我們的后退按鈕就可以向以前的網(wǎng)頁一樣后退了。

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

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

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

我們?cè)O(shè)置一個(gè)按鈕，點(diǎn)擊按鈕后回到站點(diǎn)首頁。

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

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

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

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

總結(jié)：我們利用11節(jié)課把vue-router的知識(shí)學(xué)習(xí)了一遍，因?yàn)閭€(gè)人能力有限，知識(shí)點(diǎn)難免有所遺漏，希望小伙伴們多多諒解，通過這套課程我對(duì)vue-router的知識(shí)有了更深的了解，對(duì)教是最好的學(xué)習(xí)也體會(huì)更深了。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。