vue这个题目还是太大，路由单独拆出来。

createWebHistory的使用

推荐在vue-router4中使用。
1、导入。

import { createRouter, createWebHistory } from 'vue-router'

2、创建 router 时使用 createWebHistory。

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    // 路由配置
  ]
})

router-link

router-link是个快捷标签，可以替代a标签，更简练更优雅。

router-link的两种用法：
<router-link to="/home">Home</router-link>
<router-link :to="{ path: '/about' }">About</router-link>

router-view需要加上，否则界面可能不展示。
<router-view></router-view>

router-link颜色是黑色，正常应该是蓝色

一般是路由未生效，查了下确实是，如果没写app.use(router)这句可能会有这个问题。

import { createApp } from 'vue';
import App from './App.vue';
import router from '../src/index.js'
const app = createApp(App);
app.use(router); // 漏了这句
app.mount('#app');

router-link 跳转了但是不展示

看看是不是少了router-view，加上这句试试。

<router-view></router-view>

其他