V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
nyse
V2EX  ›  问与答

Vue Router 在首页获取 fullPath 一直都是 '/' ?

  •  
  •   nyse · 2019-10-28 14:54:58 +08:00 · 3526 次点击
    这是一个创建于 1613 天前的主题,其中的信息可能已经有所发展或是发生改变。
    // src/main.js
    
    var app = new Vue({
      el: '#app',
      router,
      store,
      ...App,
      created: function() {
        console.log(router);
        
        router.push({
          path: '/init',
          query: {
              redirect: router.currentRoute.fullPath
              // 进入页面时,先统一转跳到 init 页面进行初始化(判断登录状态)
              // 附上当前 fullPath 用于初始化完成后转跳回来
          }
        });
      }
    });
    

    为什么在 main.js 中,通过 router.currentRoute.fullPaththis.$route.fullPath 后去到的地址都是 '/' ?

    12 条回复    2019-10-29 19:28:31 +08:00
    daguaochengtang
        1
    daguaochengtang  
       2019-10-28 16:35:39 +08:00
    要实现你说的需求应该放在路由守卫里来做
    ```
    router.beforeEach(async (to, from, next) => {
    const fullPath = to.fullPath
    next({
    path: '/init',
    query: {
    redirect: encodeURIComponent(fullPath)
    }
    })
    })
    ```
    nyse
        2
    nyse  
    OP
       2019-10-28 16:53:21 +08:00
    @nikolausliu #1 这个我知道,但是这样的话每次转跳都会被拦截到要怎么处理?
    jeodeng
        3
    jeodeng  
       2019-10-28 16:56:28 +08:00
    @nyse 你的要求不就是都被拦截吗?统一进入 init 页面再跳转
    nyse
        4
    nyse  
    OP
       2019-10-28 17:01:28 +08:00
    @jeodeng #3 我说的是首次进来,后面在 APP 中转跳当然不用啦
    learnshare
        5
    learnshare  
       2019-10-28 17:01:58 +08:00
    @jeodeng 判断是否登录不能跳页面,用 #1 的方法处理
    只有未登录的状况需要跳到登录页面,顺便带上需要跳回的 URL,登录后跳回来
    nyse
        6
    nyse  
    OP
       2019-10-28 19:29:57 +08:00
    @learnshare #5 好像也只能这样,这样的话就每次转跳前做判断,感觉不是很完美。

    就是不知道有没有哪个地方可以实现第一次进入就执行一次。
    agdhole
        7
    agdhole  
       2019-10-28 19:35:28 +08:00
    @nyse #6 存到 localstorage 判断是否是第一次就行了
    nyse
        8
    nyse  
    OP
       2019-10-28 21:46:37 +08:00
    @agdhole #7 关键就是用来 beforeEach 这个钩子,每次转跳都会触发,感觉不是很合理


    虽然性能也没啥影响
    markzyh
        9
    markzyh  
       2019-10-28 21:58:33 +08:00
    路由守卫,根据 from 判断是否是第一次
    learnshare
        10
    learnshare  
       2019-10-28 22:16:45 +08:00
    @nyse 每次跳转都检查才对,因为你也不知道用户以哪个页面作为入口
    daguaochengtang
        11
    daguaochengtang  
       2019-10-29 14:36:05 +08:00
    关于“为什么在 main.js 中,通过 router.currentRoute.fullPath 或 this.$route.fullPath 后去到的地址都是 '/' ?”
    因为 created 的时候,“路由还没有挂载,打印的是根路由”。我这个说法可能不是很准确,明白这么个意思就行。你可以试下下面的代码:
    ```
    created: function() {
    console.log(router.currentRoute.fullPath)
    setTimeout(() => {
    console.log(router.currentRoute.fullPath)
    }, 2000)
    }
    ```
    第一个打印的是“/”,第二个打印的是当前页面的实际路由。所以你可以在这个 created 里做一个轮询来判断,但是我还是觉得用 beforeEach 更规范一点
    nyse
        12
    nyse  
    OP
       2019-10-29 19:28:31 +08:00
    @nikolausliu #11 是的,这个我有试过

    目前的情况就是希望在生命周期有某个环节,当首次进入的时候执行一次最好了。

    因为轮询和 beforeEach 感觉都不是很优雅,虽然性能基本没影响。

    我目前是在 beforeEach 处理的。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1048 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 22:35 · PVG 06:35 · LAX 15:35 · JFK 18:35
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.