vue-router学习汇总

*红色标注为功能主要点

1·路由嵌套
{
   path:"/",
   name:'hello',
   component:hello,
   children:[{
    {path:'/one',component:one},
    {path:'/two',component:two}
  }]
}

2·vue推荐传参方式（两种）
name传参数[实际开发中不常用]
app.vue:
<p>{{$router.name}}</p>

index.js
{
   path:"/",
   name:'hello',
   component:hello
},{
   path:'/hi',   
   component:hi,
   children:[{
    {path:'/one',name:'one',component:one},
    {path:'/two',name:'two',component:two}
  }]
}

params传递参数【开发中常用】

app.vue:
<router-link :to="{name:'ones',params:{username:'cyan'}}"></router-link>

index.js
{
   path:"/",
   name:'hello',
   component:hello
},{
   path:'/hi',   
   component:hi,
   children:[{
    {path:'/one',name:'ones',component:one},
    {path:'/two',name:'two',component:two}
  }]
}

hi.vue:
<h2>{{$router.params.username}}</h2>

 

3·单页面多路由router-view 
<router-view name="left"></router-view>
<router-view name="right"></router-view>

components:{
 default:hello,
 left:hi1,
 right:hi2
}
4·利用url传参
{
   path:"/",
   name:'hello',
   component:hello
},{
   path:'/params/:newsid(\\d+)/:newstitle',   //()内加正则筛选参数的传递
   component:params
}

vue:
app.vue下面
<router-link to="/">home</router-link>
<router-link to="/params/198/okok">prarms</router-link>

param.vue下面接受参数
<h2>newsid:{{$router.params.newsid}}</h2>

export default{
   data(){
     return{
      msg:"prams pages"
     }
 }
}

5·重定向redirect

{
   path:"/",
   name:'hello',
   component:hello
},{
   path:'/params/:newsid(\\d+)/:newstitle',   //()内加正则筛选参数的传递
   component:params
},{
   path:'/gohome'，
   redirect:'/'               //利用redirect使gohome重定向回hellow页面
},{
   path:'/goparams/:newsid(\\d+)/:newstitle'，
   redirect:'/params/:newsid(\\d+)/:newstitle' //带参数重定向
}

6·alias别名

{
   path:"/",
   name:'hello',
   component:hello
},{
   path:'/params/:newsid(\\d+)/:newstitle',   //()内加正则筛选参数的传递
   component:params
},{
   path:'/gohome'，
   redirect:'/'               //利用redirect使gohome重定向回hellow页面
},{
   path:'/goparams/:newsid(\\d+)/:newstitle'，
   redirect:'/params/:newsid(\\d+)/:newstitle' //带参数重定向
},{
   path:'/hi1'，
   component:hi1,
   alias:cyan                          //给改路径起别名cyan
}

<router-link to="hi1"></router-link>
<router-link to="cyan"></router-link>

与重定向的区别就是别名会在浏览器路由中显示出来，但是重定向不会显示；
注意：home页面起别名无效

7·路由过渡动画   
app.vue中：
<transition name="fade" mode="out-in">
   <router-view></router-view>
</transition>

有4个类名
.fade-enter{
  opacity:0
}
.fade-enter-active{
  transition:opacity .5s
}
.fade-leave{
  opacity:1
}
.fade-leave-active{
  opacity:0;
  transition:opacity 
}

mode两种：in-out   out-in

8·mode的作用和404错误处理

index.js:

export default new Router{
mode:"history",        //两种模式，history路径后不带#；hash路径后带#默认

router:[
{
   path:"/",
   name:'hello',
   component:hello
},{
   path:'/params/:newsid(\\d+)/:newstitle',   //()内加正则筛选参数的传递
   component:params，
   beforeEnter:(to,form,next)=>{
      console.log(to)
      console.log(form)
      next(true)           
      next(false)
      next({path:"/"})
      //判断是否进入跳转true 进入跳转；false不进行跳转；{}跳转指定路由  
   }
},{
   path:'/gohome'，
   redirect:'/'               //利用redirect使gohome重定向回hellow页面
}，{
   path:'*'，                       // path为*，定制404页面
   component:error
}
]
}

9·路由中的钩子函数（两种方式）

在路由中写钩子函数

{
   path:"/",
   name:'hello',
   component:hello
},{
   path:'/params/:newsid(\\d+)/:newstitle',   //()内加正则筛选参数的传递
   component:params，
   beforeEnter:(to,form,next)=>{
      console.log(to)
      console.log(form)
      next(true)           
      next(false)
      next({path:"/"})
      //判断是否进入跳转true 进入跳转；false不进行跳转；{}跳转指定路由  
   }
}

页面模板中进行
data(){},
beforeRouterEnter:(to,from.next)=>{
    console.log("准备进入页面")
    next()
},
beforeRouterLeave:(to,from.next)=>{
    console.log("准备离开页面")
    next()
}

10·vue-router的编程式导航常见跳转

methods:{
  goback(){
   this.$router.go(-1)
  },
  gobefore(){
   this.$router.go(1)
  },
  gohome(){
    this.$router.push('/')
  }
}