VueJS | Как я могу получить параметры URL в vue. js?

Question

Привет, я делаю свои собственные сайты. и я новичок ie vue. js Я пытаюсь получить параметры для URL. Пытался любым методом. но не работает. Вот URL. -> example.com:8080/login на этой странице есть кнопка для регистрации. Все, что я хочу, это когда я даю параметр url (example.com:8080/login?id=hello&pw=1234) при входе в систему. vue, вставляю значение -> user_id = hello, user_pw = 1234 и возвращаюсь на exapmle.com : / 8080 Я пытаюсь использовать vue .router. но это не работает. ошибка

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

, а это /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

, и это часть входа в систему. 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();
        }
}

я не знаю, что не так в моем коде. мое объяснение слишком плохое. Прости. но я стараюсь изо всех сил

Answer 1

Вы назначаете routes компоненту входа.

Замените

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

с

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

Answer 2

Пример "Hello world" (Может быть, будет полезно). Щелкните ссылку, чтобы получить 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>