vue路由vue-router

1.同步路由

　　a.引入你想跳轉的文件 import payment from './app/payment'

　　b.在路由裏配置你的頁面

　　const router = new VueRouter({
 　　 routes: [
    　　{name:'payment',path:'/payment',component: payment}  //path裏的路徑是指你瀏覽器顯示的路徑（例如http://localhost:9000/#/payment）
　　})
　c.調用你的路由（個人實例代碼是寫在一個方法裏的）
　　payMent(){
　　   var obj={total:this.totalPrice}

　　　　router.push({

   　　　　name:"payment",
  　　　　 params:obj //若是須要傳參時寫（這必須傳對象，否則界面會獲取不到你想要傳的值） 調用傳過來的參數 TitleValue: this.$route.params.item.name,

　　　　})
　　 }
2.異步路由
　　使用異步路由不須要引入文件，也就是同步路由中的a步驟不須要，
　　a.配置你要跳轉的界面路由
　　　　const router = new VueRouter({ 
　　　　　　routes: [{name:'payment',path:'/payment',component:(resolve)=>{
　　
　　　　　　　　require.ensure(['./app/payment'],()=>{

 　　　　　　　　　　resolve(require('./app/payment'))

      　　  })
   　　 }},
    
　　  ],
　　})
3.動態路由的配置

const User = {
  template:'<div>User</div>'  
}

const router = new VueRouter({
   routes:[
      //動態路徑參數，以冒號開頭
      {path:'/user/:id',component:User}    
    ] 
})
   <router-link to="/user/bar">/user/bar</router-link> 

能夠在路由中設置多段路徑參數，對應的值會設置到$route.params中

模式	匹配路徑	$route.params
/user/:username	/user/evan	{username:'even'}
/user/:username/post/:post_id	/user/evan/post/123	{username:'even',post_id:123}

當兩個路由使用同一組件的時候，切換時原來的組件實例會被複用。由於兩個路由都渲染同個組件，比起銷燬再建立，複用則顯得更加高效。不過，這也意味着組件的生命週期鉤子不會再被調用。

4.嵌套路由

const router = new VueRouter({
   routes: [
      {path: '/user/:id',component: User,
         children: [
           {
              //當/user/:id/profile匹配成功
              //UserProfile會被渲染在User的<router-view>中
              path:'profile',
              component:UserProfile
           },
           {
              //當/user/:id/posts匹配成功
              //UserPosts會被渲染在User的<router-view>中
              path: 'posts',
              component: UserPosts
           }
         ]
      }    
   ]
})
  要注意，以/開頭的嵌套路徑會被看成根路徑。這讓你充分的使用嵌套組件而無須設置嵌套的路徑

5.命名路由

const router = new VueRouter({
    routers: [
       {
         path: '/user/:userId',
         name: 'user',
         component:User 
       }
     ] 
})

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

router.push({ name: 'user', params: { userId: 123 }})

6.編程式的導航

聲明式	編程式
<router-link :to=''>	router.push()  //window.history.pushState router.replace()//window.history.replaceState

導航到不一樣的url時，router.push方法會向history棧添加一個新的記錄，因此，當用戶點擊瀏覽器後腿按鈕時，則回到以前的url。router.replace()跟push很像，可是它不會向history添加新記錄，而是跟它的方法名同樣替換掉當前的history記錄

//字符串
router.push('home')
//對象
router.push({path:'home'})
//命名的路由
router.push({name:'user',params:{userId:123}})
//帶查詢參數，生成/register?plan=private
router.push({path:'register',query:{plan:'private'}})

router.go(n)相似於window.history.go(n)

//在瀏覽器記錄中前進一步，等同於history.forward()
router.go(1)
//後退一步記錄，等同於history.back()
router.go(-1)
//前進3步記錄
router.go(3)

7.命名視圖

不寫名字的默認爲default,使用時components（帶上s）

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
const router = new VueRouter({
 routes:[
  {
    path:'/',
    components:{
      default:Foo,
       a:Bar,
       b:Baz
     }
  }
 ]
})    

8.重定向

/a重定向到/b
const router = new VueRouter({
   routes: [
     {path:'a',redirect:'/b'}
   ]
})

//重定向的目標也能夠是一個命名的路由
const router = new VueRouter({
  routers: [
    {path:'/a',redirect:{name:'foo'}} 
  ]
})
//也能夠是一個方法，動態返回重定向目標
const router = new VueRouter({
  routes: [
    {path:'/a',redirect: to =>{
      //方法接收目標路由做爲參數
      //return 重定向的字符串路徑/路徑對象
     }}
   ]
})

9.別名

const router =new VueRouter({
  routes:[
    {path:'/a',component:A,alias:'/b'}
   ]
})

10.導航鉤子：路由發生變化是觸發

鉤子方法的參數介紹：

1.to(route):即將要進入的目標路由對象

2.from(route):當前導航正要離開的路由

3.next(Function):必定要調用該方法來resolve這個鉤子。執行效果依賴next方法的調用參數（確保要調用next方法，不然鉤子就不會被resolved）

   3.1.next():進行管道中的下一個鉤子。若是所有鉤子執行完了，則導航的狀態就是confirmed(確認的)

   3.2.next(false):中斷當前的導航。若是瀏覽器的URL改變了（多是用戶手動或瀏覽器後腿按鈕），那麼URL地址會重複到from路由對應的地址

   3.3.next('/')或next({path:'/'}):跳轉到一個不一樣的地址。當前的導航被中斷，而後進行一個新的導航

全局鉤子

const router = new VueRouter({})
router.beforeEach((to,from,next)=>{})
一樣能夠註冊一個全局的after鉤子，不過它不像before鉤子那樣，它沒有next方法
router.afterEach(route=>{})

某個路由獨享的鉤子

const router = new VueRouter({
   routes:[
     {path:'/foo',
       component:Foo,
      beforeEnter:(to,from,next)=>{}
     }
   ]
})

組件內的鉤子

beforeRouteEnter:它不能訪問this,由於鉤子在導航確認前被調用，所以即將登場的新組件還沒被建立，。不過你能夠經過傳一個回調給next來訪問組件實例。在導航被確認的時候執行回調，而且把組件實例做爲回調方法的參數

      beforeRouteEnter(to,from,next){next(vm=>{//經過vm訪問組件實例})}

beforeRouteUpdate

beforeRouteLeave:直接訪問this。這個leave鉤子一般用來禁止用戶在還未保存修改以前忽然離開。能夠經過next(false)來取消導航

const Foo = {
  template:'.....',
  beforeRouteEnter(to,from,next){
    //在渲染該組件的對應路由被confirm前調用
    //不能獲取組件實例this
   //由於鉤子執行前，組件實例還沒被調用
  }，
  beforeRouteUpdate(to,from,next){
   //在當前路由改變，可是該組件被複用時調用
  //舉例來講，對於一個帶有動態參數路徑/foo/:id,在/foo/1和/foo/2之間跳轉的時候，
  //因爲會渲染一樣的Foo組件，所以組件實例會被複用。而這個鉤子就會在這個狀況下被調用。
  //能夠訪問組件實例this
  },
   beforeRouteLeave(to,from,next){
     //導航離開該組件的對應路由時調用
    //能夠訪問組件實例this
  }
}

路由元信息：詳細查看API

11.過渡動效

全局：

 

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

 

單個路由的過渡：需設置不一樣的name

const Foo = {
   template:`<transition name="slide">
                     <div class="foo"></div>
                   </transition>
                 `
}

const Bar= {
   template:`<transition name="fade">
                     <div class="bar"></div>
                   </transition>
                 `
}

基於路由的動態過渡

//使用動態的transition name
<transition :name="transitionName">
   <router-view></router-view>
</transition>

//接着在父組件內
//watch $route 決定使用哪一種過渡
watch:{
   '$route'(to,from){
        const toDepth = to.path.split('/').length
        const fromDepth = from.path.split('/').length
        this.transitionName = toDepth<fromDepth ? 'slide-right' : 'slide-left'
   }
}

 數據獲取

12.滾動行爲：vue-router可讓你自定義切換時頁面如何滾動（注意：這個功能只在html5 history模式下可用）

滾動的方法scrollBehavior：

　　接收的參數：路由對象（to from）,第三個參數savedPosition當且僅當popstate導航（經過瀏覽器的前進/後退按鈕觸發）時纔可用

 　　　　savedPosition方法返回滾動位置的對象信息：

　　　　　　{x：number，y：number}   {selector：string}  （若是返回一個布爾假值，或空對象，就不會發生滾動）　　

使用例子：
const router = new VueRouter({
   routes:[...],
   scrollBehavior(to,from,savedPosition){
       //return 指望滾動到哪一個的位置
   } 
})

不會發生滾動的例子：
scrollBehavior(to,from,savePosition){
  return {x:0,y:0}  
}

按下前進/後退時：
scrollBehavior(to,from,savedPosition){
 if(savePosition){
   return savedPosition
 }else{
    return {x:0,y:0}
 }
}

模擬滾動到錨點的行爲：
scrollBehavior(to,from,savedPosition){
  if(to.hash){
    return{
       selector:to.hash
    }
  }
}

13.路由懶加載：結合Vue的異步組件和webpack的code splitting feature，實現路由組件的懶加載