Technology sharing | test platform development - Vue router routing design for front-end development

This article is excerpted from the internal textbook of Hogwarts testing college

The route here refers to the path manager between pages , Simply understood as vue-router Is the link path management system .vue-router yes Vue.js The official routing plug-in , It and vue.js It's deeply integrated , Suitable for building single page applications .vue-router Is to map components to routes . stay vue-router Single page application , Is the switching between paths , That is, the switching of components .

vue router Routing configuration

Component design

stay Vue in , Routing is configured in router Medium index.js Configuration in .

for example ：

First, in the components Create two Vue Components , Namely SignIn.vue and SignUp.vue. The contents of these two documents are

SignIn.vue

<template>    <div class='login-form'>         <h1> Sign in </h1>        <v-text-field label=" user name "></v-text-field>        <v-text-field type="password" label=" password "></v-text-field>        <v-btn color='primary'> Sign in </v-btn>        <v-btn color='primary' text> register </v-btn>    </div></template>

SignUp.vue

<template>    <div class='sign-up'>        <h1> register </h1>        <v-text-field lable=" user name "></v-text-field>        <v-text-field lable=" password " type='password'></v-text-field>        <v-text-field lable=" mailbox "></v-text-field>        <v-btn color='primary'> register </v-btn>        <v-btn color='primary' text> To land </v-btn>    </div></template>

These two pages are the login interface and the registration interface , And that's where it comes in router Medium index.js File to manage routing .

Routing configuration

First, we find in the existing projects index.js The file of , The default content is as follows ：

//  Configure routing rules const routes = [  {    path: '/',   //  The root path of the web page , Home page     name: 'Home',  //  Unique identification , Used to identify the role     component: Home   //  Associated components   },  {    path: '/about',    name: 'About',    // route level code-splitting    // this generates a separate chunk (about.[hash].js) for this route    // which is lazy-loaded when the route is visited.    component: function () {      return import(/* webpackChunkName: "about" */ '../views/About.vue')    }  }]

Now the above SignIn.vue and SignUp.vue Two components are configured .

First of all, it's in index.js There are two components configured for routing

1、 stay index.js Import these two components

import SignIn from '../components/SignIn.vue'import SignUp from '../components/SignUp.vue'

2、 stay index.js Configure routing information

  {    path:'/',          #  there  path:'/'  Is the path that the page can access     name:'SignIn',     #  As the identification of this route     component:SignIn   #  Specify components   },  {    path:'/sign-up',    name:'SignUp',    component:SignUp  }

3、 The next step is how to trigger the jump between pages , First of all, you need to find the... Under the page  <script>  Label under methods Create a method , It's called  signUp() .

The code is as follows ：

<script>export default {    methods: {            signUp(){            this.$router.push({name:'SignUp'})  #  there  name:'SignUp'  Is in  index.js  Routing configuration  name        }    }}

4、 Bind an event to the control , Use here  @click='signUp()'  Monitor click events . When you click this button When , It will trigger signUp Method .

<v-btn color='primary' text @click="signUp()"> register </v-btn>

vue router That's all for routing design , You can practice more ~

More technical articles ： https://qrcode.ceba.ceshiren.com/link?name=article&project_id=qrcode&from=hwyun&timestamp=1651197110