How does the vuejs add the query and walk the object?

原创于 2018-11-08 14:43:00 发布 · 93 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在Vue项目中设置特殊路由用于登录页面，通过登录按钮获取当前页面的路由地址并作为参数传递，利用query对象在登录页面中读取此参数，实现登录后返回特定页面的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

让这个老实返回的页面添加特殊路由，这个页面常常都是登录注册。这次我们根据登录举例。

省略
{
      path:'/login?url=:url',
      name:'loginfirst',
      component:()=>import ('../views/login.vue')
    },
    {
      path:'/login',
      name:'loginsecond',
      component:()=>import ('../views/login.vue')
    }
省略

　我们在登录的按钮上这样搞。

获取这个页面的路由地址，只要一点这个按钮，url就会带上这个参数。

那怎么在这个登录页面获取url上的这个参数呢？Vue中有一个这样的对象query.我们可以通过devtool去观察一下这个对象

从而我们在登录的这个按钮中，通过query获取即可！

login(){
            this.$store.dispatch('LOGIN',this.user).then(res=>{
                console.log(res);
                if (res){
                    if(this.$route.query.url!=null && this.$route.query.url!=undefined){
                        let returnurl = this.$route.query.url;
                        this.$router.push(returnurl);
                        return;
                    }else{
                        this.$router.push('/');
                    }
                }
            })
        }