给出一个vue router 4的示例代码

当然，下面是一个简单的 Vue Router 4 示例代码：

1. 在 `router/index.js` 文件中定义路由：

import { createRouter createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

2. 创建两个简单的视图组件，并分别放置在 `views/Home.vue` 和 `views/About.vue` 文件中：

<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

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

<template>
  <div>
    <h1>About</h1>
  </div>
</template>

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

3. 在主 `App.vue` 文件中使用 `<router-view>` 标签来显示对应的组件：

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

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

4. 在主 `main.js` 文件中引入 Vue 和路由，并将路由挂载到根组件上：

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

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

现在，你可以在浏览器中访问 `/` 路径和 `/about` 路径，分别显示 `Home` 和 `About` 组件的内容。

这只是一个简单的示例，你可以根据实际需求在路由配置中定义更多的路由路径和组件，并在对应的组件中编写更多的业务逻辑。