<一> 初识 vue-router

91 阅读1分钟

引入: 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

}

如有不足之处请点播 一  二 !!!!!