Hello, I am currently working on creating my own websites and I am new to vue.js. I am having trouble getting parameters from the URL. I have tried multiple methods but none seem to work. Here is an example URL: example.com:8080/login. On this page, there is a button to register. My goal is to be able to pass URL parameters (example.com:8080/login?id=hello&pw=1234) to the login.vue file and insert the values - user_id = hello, user_pw = 1234, then redirect back to example.com:/8080. I have been trying to use vue.router but it is not working. The error message I am receiving is:
javax.servlet.ServletException: Circular view path [error]: would dispatch back to the current handler URL [/error] again. Check your ViewResolver setup!
Here is a snippet of my /router/index.js file:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Main from '../views/Main.vue'
import Login from '../views/Login.vue'
import Intro from '../views/Intro.vue'
import Info from '../views/Info.vue'
import Setting from '../views/Setting.vue'
import store from '../store'
import user_id from '../views/Login.vue'
import user_pw from '../views/Login.vue'
Vue.use(VueRouter)
const routes = [{
path: '/',
redirect: '/main',
},
/* Other route configurations */
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes: Login
});
var myApp = new Vue({
router,
el: '#app',
mounted: function() {
let parameters;
parameters = this.$route.query
console.log(parameters)
user_id = this.$route.query.id
user_pw = this.$route.query.pw
}
})
export default router
And here is a snippet of my login.vue file:
export default {
name: "test",
function() {
return {
id: "",
pw: "",
};
},
methods: {
test() {
axios.post("/login", {
id: this.userId,
pw: this.password
})
.then(function(response) {
if(response.data.code === 200) {
}
})
},
mounted : function() {
this.load();
}
}
I am not sure what is wrong with my code. My explanation may not be the best, but I am trying my hardest to figure it out.