vue-router學習筆記

配置路由模式

const router=new VueRouter({
   routes
})

hash模式(默認):經過url的hash來模擬一個完整的url，因而當url改變時，頁面不會從新加載。
history模式：經過history完成url跳轉而不須要從新加載頁面。
注意：爲了防止404錯誤，要寫個notFound.html來防止頁面找不到錯誤

const router=new VueRouter({
   routes:[
     {path:'*',component:NotFoundComponent}
   ]
})

動態路由匹配
假設當前有路徑/data,當你/data/xx,無論xx是什麼內容，都須要讓他顯示某個組件component:A,或者說是路由到某一個頁面，就須要使用動態路由配置。
嵌套路由
假如/data下能有兩個子路由/data/a和/data/b分別跳轉A和B頁面，這時就能夠使用嵌套路由。
編程式的導航
能夠在代碼中控制路由，包含了幾個跳轉函數。
router.push(location) history會有記錄
router.replace(location) history不會有記錄
router.go(n) 在history記錄中向前跳轉幾頁或者向後幾頁
其中location的值有如下幾種類型:
'home'
{path:'home'}
{name:'user',params:{userId:123}} //命名路由，變成/user/123
{path:'register',query:{plan:'private'}} //帶查詢參數，變成/register?plan=private
重定向和別名

const router=new VueRouter({
  routes:[
    { path:'/a',redirect:'b'}
  ]
}

也能夠是命名的路由
const router=new VueRouter({
routes:[

{path:'/a',redirect:{name:'foo'}}

]
})
路由組件傳參
使用props將組件和路由解耦：
取代與$route的耦合

const User={
template:'<div>User {{$route.params.id}}</div>'
}
const router=new VueRouter({
  routes:[
     {path:'/user/:id',component:User}
  ]
})

//經過props解耦
const User={
  props:['id'],
  template:'<div>User{{id}}</div>'
}
const router=new VueRouter({
  routes:[
    {path:'/user/id',component:User,props:true},
    {
      path:'/user/:id',
      components:{default:User,sidebar:Sidebar},
      props:{default:false,sidebar:false}
     }
   ]
})

過渡動效
使用<transition>組件添加一些過渡特效

<transition>
  <router-view></router-view>
</transition>

單個路由的過渡
讓每一個路由組件有各自的過渡效果，解決方法在各路由組件內使用<transition>並設置不一樣的name。

const Foo={
  template:'
  <transition name="slide">
     <div class="foo">...</div>
  </transition>
'
}
const Bar={
  template:'
    <transition name="fade">
       <div class="bar">...</div>
    </transition>
  '
}

數據獲取
分爲兩種：
（1）導航完成以後獲取：先完成導航，而後在接下來的組件生命週期鉤子中獲取數據，在數據獲取期間顯示「加載中」。
（2）導航完成以前獲取：導航完成前，在路由進入的守衛中獲取數據，在數據獲取成功後執行導航。

導航完成後獲取數據
使用這種方式，立刻導航和渲染組件，而後在組件的created鉤子中獲取數據，能夠在數據獲取期間展現一個loading狀態。
<template>
  <div class="post">
     <div class="loading" v-if="loading">
     Loading...
     </div>
     <div v-if="Error" class="error">
     {{error}}
     </div>
     <div v-if="post" class="content">
       <h2>{{post.title}}</h2>
       <p>{{post.body}}</p>
     </div>
</template>

export default{
  data(){
    return{
      loading:false,
      post:null,
      error:null
    }
  },
  created(){
    //組件建立完後獲取數據，此時的數據已經被檢測到了
    this.fetchData()
   },
   watch:{
      '$route':'fetchData'
   },
   methods:{
     fetchData(){
       this.error=this.post=null
       this.loading=true
       getPost(this.$route.params.id,(err,post)=>{
         this.loading=false
         if(err){
            this.error=err.loading()
         }else{
           this.post=post
          }
        })
      }
     }
   }