本文以router-link（相当于一个a标签）为例介绍路由基础环境的配置

安装路由

打开cmd输入 
npm install vue-router@4

注意，本文使用路由为vue-router: "^4.0.12"（按照上面代码安装即可），不同版本之间会出现一些不同容易发现一些无法预料的错误

教程开始

在App.vue中

找到src目录的main.js文件

import { createApp } from 'vue'
import App from './App.vue'
import { createRouter, createWebHashHistory } from 'vue-router'//解构路由
import Home from './components/home.vue'   //引入一个组件，from后面接的是一个组件的路径，home.vue为我随意创建的一个文件，里面随便加点内容即可
import About_us from './components/about_us.vue'

//定义路由
const routes = [{
    path: '/about_',//组件一，path和component可以乱写，
                       只要保持path与前面to，component和import两处相同即可
    component: Home
},
{
    path: '/about_us',
    component: About_us
},
]

//配置路由
const router = createRouter({
    history: createWebHashHistory(),
    routes,//这里是routes：routes的缩写，同时此处还可以定义路由
})

//创建一个vue应用，本处写法适用于前面所说的路由版本，其他版本自测
const app = createApp(App).use(router);
app.mount('#app')

效果图，请忽略样式

?

本人vue为零基础，若有错误望多多包涵