初始化
new Router({
routes,
mode: "history",
fallback:true,
linkExactActiveClass: "exact-active",
linkActiveClass: "active",
scrollBehavior(to,from,savedPosition){
if(savedPosition){
return savedPosition
}else {
return {x:0,y:0}
}
}
})
路由配置
const routes = [
{
path:'/',
redirect:'/home'
},
{
path:'/home',
component: HomeCmp,
name:'home',
meta:{
title:'首页',
description:'这是首页'
},
children:[
{
path:'test',
component:TestCmp,
name:'test',
}
]
}
]
<router-link to="/home">home</router-link>
<router-link :to="{name:'home'}">home</router-link>
<router-view></router-view>
.fade-enter-active,.fade-leave-active{
transition:opacity 0.5s;
}
.fade-enter,.fade-leave-to{
opacity:0
}
<transition name="fade">
<router-view />
</transition>
路由传参
[
{
path:'/app/:id',
component:AppCmp,
name:'app'
},
{
path:'/app2/:id2',
component:App2Cmp,
name:'app2',
props:true,
}
]
let _id = this.$route.params.id
props:['id2']
let _id2 = this.props.id2