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