vue3手把手教你手动安装路由

1. 用npm命令安装路由

npm install vue-router --save

查看ackage.json安装成功

2. 再src下面新建一个router文件夹，在router文件夹下新建一个index.js文件

在index.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;

3.修改app.vue页面

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

<script>

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

<style>
</style>

4. 在main.js加入下面内容
   

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


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