我的博客--整理知识点-路由

132 阅读1分钟
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')