VueJS | How can i get url parameters in vue.js?

Question

Hi I'm making my own websites. and i'm newbie vue.js I'm trying to get parameters to url. I've been trying to any method. but not works. Here is a url. -> example.com:8080/login in this page, there's a button to register. All i want is when i give url parameter(example.com:8080/login?id=hello&pw=1234), in login.vue, insert value -> user_id = hello, user_pw = 1234 and going back to exapmle.com:/8080 i'm trying to using vue.router. but it not works. the error is

javax.servlet.ServletException: Circular view path [error]: would dispatch back to the current handler URL [/error] again. Check your ViewResolver setup!

and this is /router/index.js

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',
    },
    {
        path: '/login',
        name: 'login',
        component: Login,
    },
    {
        path: '/signup',
        name: '/signup',
        component: SignUp
    },
    {
        path: '/main',
        component: Main,
        beforeEnter(to, from, next) {
            if (store.state.accessToken) {
                next();
            } else {
                next('/login');
            }
        },
        children: [{
                path: '',
                name: 'intro',
                component: Intro,
            },
            {
                path: '/info',
                name: 'info',
                component: Info,
            },
            {
                path: '/setting',
                name: 'setting',
                component: Setting,
            },
        ]
    },
]

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 this is part of login.vue

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 don't know what is wrong in my code. my explain is too bad. sorry. but i'm trying to do my best

Answer 1

"Hello world" example (Maybe it will be helpful). Click on the link to get utm_source:

const User = {
  template: `<div><b>User:</b> {{ this.$route.params.id  }} | <b>utm_source:</b> 
    {{this.$router.currentRoute.query['utm_source']}}</div>`
}

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

const app = new Vue({ router }).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <nav>
    <router-link to="/user/foo?utm_source=facebook">Click her to see the utm_source=facebook of /user/foo?utm_source=facebook</router-link>
  </nav>
  <router-view></router-view>
</div>

Answer 2

You are assigning routes to the Login component.

Replace

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: Login
});

with

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
});