Vue3：路由案例

1、安装并配置 vue-router 4.x

1. 运行如下的命令，安装 vue-router ：

```clike
npm install vue-router@next -S 
```

2. 在 src 目录下新建 router.js 路由模块：

```clike
// 1. 按需导入对应的函数
import { createRouter, createWebHashHistory } from 'vue-router'
// 2. 创建路由对象
const router = createRouter({
history: createWebHashHistory(),
routes: [],
})
// 3. 向外共享路由实例对象
export default router
```

3. 在 main.js 入口文件中导入并挂载路由对象：

```clike
// 1. 导入路由模块
import router from './router'
const app = createApp(App)
// 2. 挂载路由对象
app.use(router)
app.mount('#app')
```

2、展示 Login.vue 登录组件

1. 在 router.js 模块中导入 Login.vue 组件：

import Login from './components/MyLogin.vue'

2. 声明路由规则如下：

routes: [
// 路由重定向
{
   
    
     path: '/', redirect: '/login' },
{
   
    
     path: '/login', component: Login },
]

3. 在 App.vue 组件中声明路由占位符：

<template>
<!-- 路由的占位符 -->
<router-view></router-view>
</template>
<script>
export default {
   
    
    
name: 'MyApp',
}
</script>
<style lang="less" scoped>
</style>

3、 模拟并实现登录功能

1. 在 MyLogin.vue 组件中声明如下的 data 数据：

data() {
   
    
    
return {
   
    
    
username: '',
password: '',
}
},

2. 为用户名和密码的文本框进行 v-model 双向数据绑定：

<!-- 登录名称 -->
<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. 为 登录按钮 绑定点击事件处理函数：

<button type="button" class="btn btn-primary"
@click="onLoginClick">登录</button>

4. 在 methods 中声明 onLoginClick 事件处理函数如下

methods: