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

You are assigning the Login component to the routes property which is incorrect. You must assign the routes array that you have declared at the top, to the routes property of your VueRouter. — Raja
– Raja, Commented Aug 1, 2020 at 16:08
Hi, @junbeom. There is one issue I realised. You should not have params in your login route. Using query strings for password is very unsecure. Please get the value of your password from a form. — Tony
– Tony, Commented Aug 1, 2020 at 16:21

Tony · Accepted Answer · 2020-08-01 16:13:55Z

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
});

answered Aug 1, 2020 at 16:13

Tony

1,4423 gold badges11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ezra Siton · Accepted Answer · 2020-08-31 08:21:21Z

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>

edited Aug 31, 2020 at 8:21

answered Aug 1, 2020 at 16:25

Ezra Siton

7,9692 gold badges30 silver badges44 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related