直接安装vue-router

    1. npm install vue-router@4 --save

    在src目录下创建router文件夹，在文件夹下创建index.js

    1. // src/router/index.js
    2. import { createRouter, createWebHistory } from 'vue-router'
    3. const constantRoutes = [
    4.   {
    5.     name: "login",
    6.     path: '/login',
    7.     meta: {
    8.       title: '登录页'
    9.     },
    10.     component: () => import('@/views/index.vue')
    11.   },
    12. ];
    14. const router = createRouter({
    15.   history: createWebHistory(),
    16.   routes: constantRoutes
    17. })
    19. export default router;

    修改src目录下main.js文件

    1. // src/main.js
    2. import { createApp } from 'vue';
    3. import router from './router';    // 新增
    4. import App from './App.vue';
    5. createApp(App).use(router).mount('#app');

    src/App.vue

    1. // 路由匹配到的组件将渲染在这里
    2. <router-view></router-view>