官網：https://router.vuejs.org/zh-cn/

第1節：路由開始

　　安裝：npm install vue-router --save （使用vue-cli初始化項目時，若已安裝，不需重新安裝）

　　

　　配置路由：

　　使用vue-cli初始化的項目中，src/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   //對應的組件模板
    }
  ]
})

　　router-link制作導航：

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

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

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

　　
<router-view>渲染組件：

<!-- 路由匹配到的組件將渲染在這里 --> 
<router-view></router-view>

<template>
  <div id="app">
    <router-link to="/1">Hello</router-link>
    <router-link to="/2">World</router-link>
    <router-view/>
  </div>
</template>

第2節：配置子路由

　　子路由的寫法是在原有的路由配置下加入children字段。　　

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

第3節：vue-router參數傳遞

　　參數的傳遞是個最基本的業務需求 。通過URL地址來傳遞參數是一個形式。

　　

　　一、用name傳遞參數

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

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

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

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

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

　　也許上邊的傳參很不正規，也不方便，其實我們多數傳參是不用name進行傳參的，我們用<router-link>標簽中的to屬性進行傳參，需要您注意的是這里的to要進行一個綁定，寫成:to。

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

name：就是我們在路由配置文件中起的name值。
params：就是我們要傳的參數，它也是對象形勢，在對象里可以傳遞多個值。

　　在模板里用$route.params.username進行接收。

　　{{$route.params.username}}

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

　　在實際開發也是有很多用URL傳值的需求，比如我們在新聞列表中有很多新聞標題整齊的排列，我們需要點擊每個新聞標題打開不同的新聞內容，這時在跳轉路由時跟上新聞編號就十分實用。

　　

　　:冒號的形式傳遞參數

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

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

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

　　

　　2.在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>

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

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

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

第5節：vue-router 的重定向-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:'/'
    }
 
  ]
})

第6節：alias別名的使用

　　使用alias別名的形式，我們也可以實現類似重定向的效果。

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

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

　　redirect和alias的區別：　　

redirect：仔細觀察URL，redirect是直接改變了url的值，把url變成了真實的path路徑。
alias：URL路徑沒有別改變，這種情況更友好，讓用戶知道自己訪問的路徑，只是改變了<router-view>中的內容。

　　　　

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

第7節：路由的過渡動畫

　　<transition>標簽

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

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

　　css過渡類名：

fade-enter:進入過渡的開始狀態，元素被插入時生效，只應用一幀后立刻刪除。
fade-enter-active:進入過渡的結束狀態，元素被插入時就生效，在過渡過程完成后移除。
fade-leave:離開過渡的開始狀態，元素被刪除時觸發，只應用一幀后立刻刪除。
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：　　

in-out:新元素先進入過渡，完成之后當前元素過渡離開。
out-in:當前元素先進行過渡離開，離開完成后新元素過渡進入。

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

　　mode

hash: 使用 URL hash 值來作路由。支持所有瀏覽器，包括不支持 HTML5 History Api 的瀏覽器。

history: 依賴 HTML5 History API 和服務器配置

　　404頁面的處理

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

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

{
   path:'*',
   component:Error
}

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

第9節：路由中的鉤子

　　路由的鉤子選項可以寫在路由配置文件中，也可以寫在我們的組件模板中。

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

　　我們可以直接在路由配置文件（/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();
},

　　三個參數：

to:路由將要跳轉的路徑信息，信息是包含在對像里邊的。
from:路徑跳轉前的路徑信息，也是一個對象的形式。
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>

第11節：編程式導航

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

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

　　后退和前進，功能跟我們瀏覽器上的后退和前進按鈕一樣，這在業務邏輯中經常用到。

　　router.go(-1)代表著后退

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

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

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

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

總結

以上是生活随笔為你收集整理的vue-router的全部內容，希望文章能夠幫你解決所遇到的問題。

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