In the last section, we have realized the jump of registration page, so in this section, we all use the van framework to improve the registration page. Let it have basic page interaction function.
Prepare for the next step of login and registration.

This is
vant official website，

In the left navigation, scroll down to,
NavBar navigation bar

First, see the [user's Guide] to add the following code to main.js

import { NavBar } from 'vant';
Vue.use(NavBar);

Then, according to our needs, add the following code to the template in the register.vue file,

<van-nav-bar
            :title=msg
            left-text="Return"
            left-arrow
            @click-left="goBackFn"
            />

In the script in the register.vue file, add the following code,

data(){
        return {
            msg:'Registration page',

            username:'',
            password:'',
            password2:'',

            userErr:'User name cannot be empty',
            passErr:'Password cannot be empty'
        }
    },

methods:{
    // Go back to the previous step
    goBackFn(){
        this.$router.go(-1);
    }
}

Now you should be able to see a navigation bar, and when you click back, you can go back to the previous page.

Next, we use [Field input box] to realize the part of user input,
Click: Field input box，
Check the user's Guide of the document, and add the following code to main.js,

import { Field } from 'vant';
Vue.use(Field);

We use the Field's custom type to add the following code to the template area in the register.vue file,

<van-field
    v-model="username"
    required
    clearable
    label="User name"
    placeholder="enter one user name"
    @click-icon="username=''"
    :error-message="userErr"
    />

<van-field
    v-model="password"
    type="password"
    required
    clearable
    label="Password"
    placeholder="Please input a password"
    @click-icon="username=''"
    :error-message="passErr"
    />

<van-field
    v-model="password2"
    type="password"
    required
    clearable
    label="Repeat password"
    placeholder="Please re-enter the password"
    @click-icon="username=''"
    :error-message="passErr"
    />

Add the following code to the script area,

data(){
    return {
        msg:'Registration page',

        username:'',
        password:'',
        password2:'',

        userErr:'User name cannot be empty',
        passErr:'Password cannot be empty'
    }
}

At this time, our register.vue registration page, although no corresponding js method has been added, has been preliminarily completed in terms of page.

Watch more tutorial content faster, please sweep below the two-dimensional code, pay attention to WeChat public number: web front-end classroom, thank you. More front-end learning groups, let you group learning, faster progress.