手把手教你vue3引入vue-router路由

首先我们建一个文件夹 叫vue项目目录
然后用编辑器打开这个文件夹 在终端输入 : vue create catin
创建一个vue项目

然后我们用编辑器打开新生成的目录 vue项目目录下的catin

在终端中输入 : vue add vue-next 将vue2升级成vue3项目

在终端中输入 : npm install vue-router@4 引入路由插件

注意后面的@4很重要 这是在声明安装的版本 当然 以后可能会有5 6等等 版本自然是越高越好 但我们这个功能 4就可以了

然后在src目录下建立router文件夹 在router文件夹下创建router.js

router.js参考代码

import { createRouter,createWebHistory } from "vue-router";
import HelloWorld from '../components/HelloWorld.vue';
const router = createRouter({
    history:createWebHistory(),
    routes:[
        {
            path:'/',
            component:HelloWorld,
        }
    ]
})
export default router;

因为components/HelloWorld.vue是一开始就有的一个vue文件