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

最后调整对代码进行整理，移动 Home.vue Login.vue 的位置，在scr文件夹下新建views文件夹，将上面两个文件移动至此目录下 修改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 './views/Home.vue' import Login from './views/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') 总结

本文简单的创建了两个vue页面，并且初试了vue-router，让两个简单的页面能够实现跳转。在下一节的内容中将会进一步使用vue-router，更多vue-router内容可以查看 https://next.router.vuejs.org/zh/introduction.html

GitHub源码

https://github.com/Impartsoft/Simple_Vue/tree/main/simple-vue 1.antd

参考资料

Ant Design of Vue 官方文档 https://2x.antdv.com/docs/vue/getting-started-cn

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