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