手把手教你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文件
那么我们来改一下components/HelloWorld.vue的内容

参考代码如下

<template>
  <div class="hello">
     我是第一个路由组件
  </div>
</template>

<script>
export default {
      
      
  name: 'HelloWorld'
}
</script>

<style scoped>
</style>

App.vue参考代码如下

<template>
  <div id="app">
   <router-view/>
  </div>
</template>

<script>

export default {
    
    
  name: 'App',
}
</script>

<style>
</style>

然后在main.js中引入路由
main.js参考代码如下

import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from './router/router'
createApp(App).use(router).mount('#app')

只要上面的步骤你没有漏
在终端输入npm run serve
执行起来项目你就会看到这样的效果

这样就表示我们路由引入成功了