1. Instalar y configurar vue-router 4.x
1. Ejecute el siguiente comando para instalar vue-router:
```clike
npm install vue-router@next -S
```
2. Cree un nuevo módulo de enrutamiento router.js en el directorio src:
```clike
// 1. 按需导入对应的函数
import { createRouter, createWebHashHistory } from 'vue-router'
// 2. 创建路由对象
const router = createRouter({
history: createWebHashHistory(),
routes: [],
})
// 3. 向外共享路由实例对象
export default router
```
3. Importe y monte el objeto de enrutamiento en el archivo de entrada main.js:
```clike
// 1. 导入路由模块
import router from './router'
const app = createApp(App)
// 2. 挂载路由对象
app.use(router)
app.mount('#app')
```
2. Mostrar el componente de inicio de sesión Login.vue
1. Importe el componente Login.vue en el módulo router.js:
import Login from './components/MyLogin.vue'
2. Declare las reglas de enrutamiento de la siguiente manera:
routes: [
{
path: '/', redirect: '/login' },
{
path: '/login', component: Login },
]
3. Declare el marcador de posición de la ruta en el componente App.vue:
<template>
<!-- 路由的占位符 -->
<router-view></router-view>
</template>
<script>
export default {
name: 'MyApp',
}
</script>
<style lang="less" scoped>
</style>
3. Simule y realice la función de inicio de sesión
1. Declare los siguientes datos en el componente MyLogin.vue:
data() {
return {
username: '',
password: '',
}
},
2. Realice el enlace de datos bidireccional v-model para los cuadros de texto de nombre de usuario y contraseña:
<!-- 登录名称 -->
<div class="form-group form-inline">
<label for="username">登录名称</label>
<input type="text" class="form-control ml-2" id="username"
placeholder="请输入登录名称" autocomplete="off" v-model="username">
</div>
<!-- 登录密码 -->
<div class="form-group form-inline">
<label for="password">登录密码</label>
<input type="password" class="form-control ml-2" id="password"
placeholder="请输入登录密码" v-model="password">
</div>
3. Vincule la función del controlador de eventos de clic al botón de inicio de sesión:
<button type="button" class="btn btn-primary"
@click="onLoginClick">登录</button>
4. Declare el controlador de eventos onLoginClick en los métodos de la siguiente manera
methods: