一、安装配置
- 执行命令npm install vue-router安装
- 在src下创建router目录,在router目录里面创建index.js
- 在index.js中写入以下内容
import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' const routes = [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', component: function () { return import('../views/AboutView.vue') } } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router
- 在main.js中导入并使用路由
let app = createApp(App); app.use(router).mount('#app')
- 在App.vue中写
<template> <router-view/><!-- 这是路由出口 --> </template>