1.路由起步
路由传参:article {path:'/article/:id'} 传参id.
编程式跳转: this.$route.push({path:'/article',query:{id:id}})
获取参数: beforeCreate(){ if(this.$route.query.id!==null)}.
设置嵌套路由,重定向: {path:'article'
children:[{path:'/',redirect:'/index'}]}
进阶
1.登录权限,判断是否登录,没有登录跳转至登陆页面。
router.beforeEach((to,from,next)=>{
if (!to.auth.loggedIn()) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
})
to:目标 from:正要离开的路由 next:下一个钩子 next(false)中断导航
next('/')跳转另一个路径 next(error)
2.路由元信息。meta字段
{meta:{requireAuth:true}}
3.获取数据:1.导航完成后,2:导航完成前
1.watch:{'$route':'fetchData'} 路由有变化会执行该方法
2.beforeRouteEnter获取数据,获取数据后调用Next()方法
beforeRouteEnter(to,from,next)
{
getPost(to.params.id){};
next()
}
4.路由懒加载 const article=()=>import('/views/article.vue')