vue3PC端左侧路由渲染

在 Vue 3 中，你可以使用 Vue Router 来实现 PC 端左侧路由的渲染。下面是一个简单的示例供参考：

首先，安装 Vue Router：

npm install vue-router@next

然后，在你的 Vue 3 项目中创建一个路由文件，比如 `router.js`，并编写路由配置：

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

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('./views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('./views/About.vue')
  },
  // 其他路由配置...
]

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

export default router

在上面的示例中，我们定义了两个路由：Home 和 About。你可以根据自己的需求添加更多路由。

接下来，在你的主组件（比如 `App.vue`）中，使用 `<router-view>` 标签来渲染路由组件：

<template>
  <div>
    <div class="sidebar">
      <!-- 左侧导航栏 -->
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
      <!-- 其他导航链接... -->
    </div>
    <div class="content">
      <!-- 路由组件渲染区域 -->
      <router-view></router-view>
    </div>
  </div>
</template>

在上面的示例中，我们使用 `<router-link>` 标签来创建导航链接，`to` 属性指定了链接的目标路由。`<router-view>` 标签会根据当前路由来渲染对应的组件。

最后，将路由配置引入主入口文件（比如 `main.js`）并挂载路由：

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

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

通过以上步骤，你就可以在 PC 端使用 Vue 3 和 Vue Router 实现左侧路由渲染的效果了。你可以根据具体需求来自定义左侧导航栏的样式和布局，并在路由组件中填充内容。