Question

在加载登录页面时-我想检查是否设置了GET变量，并在我的Vue应用程序中获取它们（因此，我可以更改显示的模式）。

我的URL和变量如下：

https://localhost:3000/login?user=potato&token=666

我的代码如下：

let routes = [
    {
        path:       '/login',
        component:  Login
    },
    {
        path:       '/login/:user/:token',
        component:  Login,
        // props:   true
        props:      ['user', 'token']
    },
    ...
];

... ... ...

export default {
    props: [ 'user', 'token' ], 
    data() {
        return {
            // Change to yours for testing, empty these before production release
            user: '',
            pass: '',
            getData: null
        };
    },
    beforeRouteEnter (to, from, next) {
        getPost(to.params.id, (err, post) => {
            next(vm => vm.setGetData(err, post))
        })
    },
    // When route changes and this component is already rendered,
    // the logic will be slightly different.
    beforeRouteUpdate (to, from, next) {
        this.getData = null
        getPost(to.params.id, (err, post) => {
            this.setGetData(err, post)
            next()
        })
    },
    methods: {
        setGetData (err, post) {
            if (err) {
                this.error = err.toString()
            } else {
                this.getData = post
            }
        }
    }
}

我的最后尝试是尝试遵循Vues文档中的数据获取方法： https://router.vuejs.org/guide/advanced/data-fetching.html#fetching-after-navigation

但尚未完全解释（getPost is not defined）。我对Vue / VueRouter有点陌生（我使用Vanilla js或php），我的问题似乎很基本，但认真的说，还没有发现任何代表获取获取数据的充分说明示例的东西。

在开始时，我被告知这是一个“道具”传递的东西，并且也没有正确地做到这一点，跟随Vues doc： https://router.vuejs.org/guide/essentials/passing-props.html#boolean-mode

如何获取GET变量，之前显示任何内容，以便我有时间更改mode变量？
我的网址看起来正确吗？ https://localhost:3000/login?user=potato&token=666还是应该这样？ https://localhost:3000/login/potato/666？

按照建议用window.location.href手动处理时，破坏了我的代码：

    beforeRouteEnter(to, from, next) {
        console.log(window.location.href);
        if (this.getGetVariables(window.location.href)){
            console.log('has token: ' + this.token ); 
        }
        next()
    }, 

  methods: {
        // URL Variables: 
        getGetVariables: function(urlString) {
            var url = new URL(urlString);
            this.token = url.searchParams.get('token');
            console.log(this.token);
            if (!this.token) return false;
            this.user = url.searchParams.get('user');
            console.log(this.user);
        }

TypeError：无法读取未定义的属性'getGetVariables'

似乎直到达到create()才设置变量（我认为）。那么我应该在哪里保存URL变量？

我尝试将beforeRouteEnter的名称更改为beforeRouteUpdate，但是在该函数中它不再能正确获取URL。

Answer 1

您使用beforeRouteEnter的方法是正确的。您可以使用 window.location.href 使用香草JS访问get var。

我不知道获取GET参数的任何方法。

如何在加载/显示页面之前使用Vue（路由器）获取GET请求变量

1 个答案: