点击退出后登录还可以跳回到原来页面

目标:

从http://localhost:9528/#/a中退出之后，随后立即登录，还能再回到http://localhost:9528/#/a这里。

分析: 

1. 登录成功之后，进入指定的目标页面
2. 用户退出，跳入登录页时，携带目标页面地址告诉登录页

思路:

在访问login这个页面时，可以在地址栏中补充一个查询字符串来指定登陆成功之后要去到的页面

http://localhost:9528/#/login?return_url=/abc

代码实现:

在登陆成功路由跳转到指定地址

async doLogin() {
      try {
        // 在组件中调用带命名空间的action

        // dispatch是异步的，需要加async await
        await this.$store.dispatch('user/userLogin', this.loginForm)
        // 登录成功，路由跳转
       this.$router.push(this.$route.query.return_url || '/')
      } catch (err) {
        alert('用户登录，失败')
        console.log('用户登录，失败', err)
      }
    },

 退出时路由跳转路径后面添加上当前地址

logout() {
      // 弹层询问，是否退出
      this.$confirm('你确定要离开吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        // 确认
        // 删除信息
        await this.$store.dispatch('user/userLogout')
        // 去到登录页
        // this.$router.push('/login?return_url=当前的路径')
        // 跳转路由-回登陆
        // 如何获取当前页面的地址 : this.$route.fullPath
        // this.$route.path只有路径的信息
        // this.$route.fullPath：路径+查询参数的信息
+       this.$router.push('/login?return_url=' + encodeURIComponent(this.$route.fullPath))
      }).catch(() => {

      })
    }

扩展:

• $route.path:只有路径的信息

• $route.fullPath：路径+查询参数的信息

• return_url： 这个名字是自己约定的，它要和login/index.vue中跳转代码保持一致。

• encodeURIComponent： 是js的内置API,用来对url进行编码