手把手教你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 执行起来项目你就会看到这样的效果 这样就表示我们路由引入成功了