Vue.jsでは、変数に値をどのように挿入できますか?

2020-08-02 javascript spring-boot vue.js

私は自分のウェブサイトを作ろうとしています。 私のウェブサイトはフロントエンドがURLパラメータを取得すると、変数に値を自動的に割り当てます。 例。

  1. パラメータを与えます。 https://example.com/testt/123123(id)&12314(pw)
  2. メインページをリダイレクトします。 https://example.com/testt/123123&12314- > https://example.com/
  3. 次に、登録ボタンをクリックして、登録を完了します。

web-server(spring-boot)なしhttps://example.com/testt/123123&12314は動作します。しかし、ウェブサーバーでは、 https://example.com/testt/123123&12314は機能しません。 だから、どうしたらいいかわかりません。

login.vue

<template>
    <div>
        <div class="login">
            <h1 class="title">test 486</h1>
            <div>
                <button class="solid-button" @click="auth">register</button>
            </div>
        </div>
    </div>
</template>
export default {
        data() {
            return {
                id: "",
                pw: "",
            };
        },
        mounted(){
            this.id = this.$route.params.id
            this.pw = this.$route.params.pw
        },
        methods: {
            auth() {~~~

router.js

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})
const routes = [{
    path: '/',
    redirect: '/main',
},
    {
        path: '/login',
        name: 'login',
        component: Login,
    },
    {
        path: '/login/:id&pw',
        name: 'logintest',
        component: Login,
    },
    {
        path: '/testt/:id&:pw',
        name: 'testt',
        component: test,
    },
}

test.vue

<template>
    <div>
        <h2>My name is {{id}}</h2>
        <h2>My password is {{pw}}</h2>
    </div>
</template>

<script>
    export default
    { data(){
        return {
            id: 'no name'
        }
        },
        mounted(){
            this.id = this.$route.params.id
            this.pw = this.$route.params.pw
        },
        methods: {
            auth() {
                 let user_id;
                    user_id = this.id;
                    let user_pw;
                    user_pw = this.pw;}
         }

    }
</script>
<style>
</style>

最後の。

  1. example.com/testt/12323&11123に移動して値を割り当てます。
  2. example.com/をリダイレクトし、登録ボタンをクリックして、登録を完了します。

Answers

Related