vue3路由的引入和配置

第一步

  下载路由

// vue3使用@4  vue2则为@3
npm install vue-router@4

第二步

创建一个名为router的文件夹，然后在文件夹中创建一个名为index的js或ts文件，名字根据自己的习惯命名

第三步

在 index 文件中引入路由和路由模式

// 引入路由，以及路由模式
// createWebHashHistory是 Hash 模式，将 Hash 去掉就是 History 模式
import { createRouter, createWebHashHistory } from "vue-router";

第四步

配置路由

// 开始配置路由
const routes = [
    {
        // 路由的路径
        path:'/',
        // 页面的路径
        // 这是一个懒加载的形式
        component:() => import('../views/login.vue'),
    },
    {
        path:'/home',
        component:() => import('../views/home.vue'),
    }
];


// 开启路由模式
const router = createrouter({
    // 目前是 hsah 模式
    history: createWebHashHistory(),
    // 配置好的路由
    routes
});

第五步

// 导出配置好的路由
export default router

第六步

在 main 文件中导入配置好的路由，然后使用

import { createApp } from 'vue';
import App from './App.vue';

// 这里的文件后缀最好不要有，因为 ts 会转换为 js 文件
// 路径是自己项目中文件的路径，这里是我自己的
import router from './router/index'

createApp(App).use(router).mount('#app');