《Asp.Net Core3 + Vue3入坑教程》 - Vue 2.使用Ant Design of Vue编写页面 & vue-router 初试 (2)

代码如下：

<template> <div> <a-form layout="horizontal" :model="formState" @finish="handleFinish" @finishFailed="handleFinishFailed" > <a-form-item> <a-input v-model:value="formState.user" placeholder="Username"> <template #prefix><UserOutlined /></template> </a-input> </a-form-item> <a-form-item> <a-input v-model:value="formState.password" type="password" placeholder="Password"> <template #prefix><LockOutlined /></template> </a-input> </a-form-item> <a-form-item> <a-button type="primary" html-type="submit" :disabled="formState.user === '' || formState.password === ''" > Log in </a-button> </a-form-item> </a-form> </div> </template> <script> import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'; import { defineComponent, reactive } from 'vue'; export default defineComponent({ name: 'Login', setup() { const formState = reactive({ user: '', password: '', }); const handleFinish = values => { console.log(values, formState); }; const handleFinishFailed = errors => { console.log(errors); }; return { formState, handleFinish, handleFinishFailed, }; }, components: { UserOutlined, LockOutlined, }, }); </script> <style> .login-container{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin:auto; height: 600px; width: 500px; } </style> 调整App.Vue

代码如下：

<template> <Home /> <!-- <Login /> --> </template> <script> import Home from './components/Home.vue' // import Login from './components/Login.vue' export default { name: 'App', components: { Home, // Login } } </script> <style> </style> 启动网站

在终端执行命令：

yarn serve 成功看到效果

接下来我们解决路由问题，让url打开指定的页面

vue-router 官方文档 https://next.router.vuejs.org/zh/introduction.html

安装vue-router

在终端执行命令：

yarn add vue-router@next

调整main.js

代码如下：

import { createApp } from 'vue' import App from './App.vue' import Antd from 'ant-design-vue'; import { createRouter, createWebHashHistory } from 'vue-router'; import 'ant-design-vue/dist/antd.css'; import Home from './components/Home.vue' import Login from './components/Login.vue' const routes = [ { path: 'http://www.likecs.com/', component: Home }, { path: '/login', component: Login }, ] // 创建路由实例并传递 `routes` 配置 // 你可以在这里输入更多的配置，但我们在这里 // 暂时保持简单 const router = createRouter({ // 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。 history: createWebHashHistory(), routes, // `routes: routes` 的缩写 }) //创建并挂载根实例 //确保 _use_ 路由实例使 //整个应用支持路由。 createApp(App).use(Antd).use(router).mount('#app') 修改App.vue

这里的 是最顶层的出口！上面路径匹配到的组件将会在此渲染

代码如下：

<template> <router-view></router-view> </template> <script> export default { name: 'App', } </script> <style> </style> 现在我们可以通过改变url打开不同的组件

接下来我们来简单尝试路由的跳转，在登入界面验证成功之后能够正确调整到综合管理界面

因为我们在 setup 里面没有访问 this，所以我们不能再直接访问 this.$router 或 this.$route。作为替代，我们使用 useRouter 函数：
https://next.router.vuejs.org/zh/guide/advanced/composition-api.html

修改Login.vue 脚本

代码如下：

<script> import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'; import { defineComponent, reactive } from 'vue'; import { useRouter } from 'vue-router' export default defineComponent({ setup() { const formState = reactive({ user: '', password: '', }); const router = useRouter() const handleFinish = values => { console.log(values, formState); router.push('http://www.likecs.com/') }; const handleFinishFailed = errors => { console.log(errors); }; return { formState, handleFinish, handleFinishFailed, }; }, components: { UserOutlined, LockOutlined, }, }); </script> 再次启动网站

在终端执行命令：

yarn serve 跳转效果如下：