引入: npm install vue-router@4
配置路由
创建文件: routter/index.js
import { createRouter, createWebHistory } from 'vue-router'const login = () => import('@/views/home/home.vue')const home = () => import('@/views/home/home.vue')const routes = [{path: '/',name: 'home',component: home},{path: '/login',name: 'login',component: login}]const router = createRouter({history: createWebHistory(),routes})export default router
main.js
这里应该是引入加载?
import { createApp } from 'vue'import Antd from 'ant-design-vue'import App from './App.vue'import 'ant-design-vue/dist/antd.css'import router from './router/index'const app = createApp(App)app.use(Antd)app.use(router)app.mount('#app')
App.vue 调用组件 Helloworld
简单的使用
<div> <ul> <li> <router-link to="/home">23</router-link> </li> <li> <router-link to="/">///</router-link> </li> </ul> <router-view></router-view> </div>
遇到问题
interface Array 类型注释只能在 TypeScript 文件中使用。
解决在: settings.json 文件添加
{
"javascript.validate.enable": false
}
如有不足之处请点播 一 二 !!!!!