2018-07-22

关于vue-router的简单小结

1 如果有多个页面使用同一个组件,当你路径跳转后,那些定义在生命周期中的钩子函数就会失去作用,例如
当你想根据不同的路径使同一个组件上显示不同内容时,我们一般会在creat里面判断,但是由于路径是相同的,组件会直接复用,他就不会销毁后在重新创建一个,所以需要在beforeRouteUpdate里面响应这个变化。或者也可以通过 watch监听$route对象
2

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})
 meta: { requiresAuth: true }

路由元信息,
配置中的每个路由对象为 路由记录。路由记录可以是嵌套的,因此,当一个路由匹配成功后,他可能匹配多个路由记录,一个路由匹配到的所有路由记录会暴露为route对象的$route.matched数组.上面是一个简单的应用。用于拦截登陆。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 9,739评论 1 52
  • nginx加vue加spring boot配置前后台分离 vue用vue-cli打包后默认路径为http://.....
    黑屋粑粑阅读 231评论 0 0
  • 局部组件需要注册到Vue实例之中才可以使用 模版和传值的封装 template 和 props 一个逗号的小Bug
    无欲而为阅读 122评论 0 0
  • 最短路径算法之Dijkstra算法 基本思想 通过Dijstra计算图G中的最短路径时,需要指定起点s(即从顶点s...
    Ping接未来阅读 137评论 0 0
  • 计划 1.下载课堂论文 2.分析折衷主义看完 3.要讲的论文思路整理 4.查一查开题报告怎么写 5.文献综述的思路...
    Mayday罗润阅读 163评论 1 0