При загрузке страницы входа в систему - я хочу проверить, были ли установлены переменные 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:
https://router.vuejs.org/guide/essentials/passing-props.html#boolean-mode
Как мне получить переменные GET, до того, как что-нибудь отобразится, поэтому у меня есть время, чтобы изменить переменную режима?
Правильно ли выглядит мой URL? 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-адрес.