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别名

<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('/')
}
}

猜你喜欢