1、声明式
传参的二种方式
params:/home/1/2 需要在路由path中配置 {path:'/home/:id/:age'}
query:/home?id=1&age=2
接收参数
params：this.$route.params.id
query：this.$route.query.id
路由跳转
<router-link to="/home">点击跳转</router-link>
<router-link :to="{path:'/home'}">点击跳转</router-link>
<router-link :to="{name:'Home'}">点击跳转</router-link>
<router-link :to="{path: '/home', query:{id:1}}">点击跳转</router-link>
<router-link :to="{path:'/home', params:{id:1}}">点击跳转</router-link> // 无效
<router-link :to="{name:'Home', params:{id:1}}">点击跳转</router-link>
<router-link :to="{name: 'Home', query:{id:1}}">点击跳转</router-link>
2、编程式
this.$router.push('/home')
this.$router.push({path: '/home'})
this.$router.push({name: 'Home'})
this.$router.push({path: '/home', params:{id:1}}) // 无效
this.$router.push({path: '/home', query:{id:1}})
this.$router.push({name: 'Home', params:{id:1}})
this.$router.push({name: 'Home', query:{id:1}})
3、嵌套路由
一级路由显示在APP.vue中的<router-view />中
二级路由显示在它对应的一级路由组件的<router-view />中
let routes = [
{
path: 'home',
name: 'Home',
component: ( ) => import('../views/Home')
},
{
path: 'list',
component: ( ) => import('../views/List'),
children: [
{
path: '/list/list1',
component: ( ) => import('../views/list1')
},
{
path: 'list2',
component: ( ) => import('../views/list2')
}
]
}
]
4、路由props传参
路由文件
{
path: 'list1',
name: 'List1',
meta: {title: '列表一'}，
props: true, // 可以使用props传参
component: ( ) => import('../views/List1')
},
{
path: 'list2',
name: 'List2',
meta: {title: '列表二'}，
props: {
data: {a:1, b:2}
},
component: ( ) => import('../views/List2')
},
List2组件
props: ['data']
5、路由拦截
router.beforeEach(function(to, from, next){
console.log('路由跳转之前拦截')
next( )
})