Vue Router 提供 Vue 应用的路由功能，简单理解就是页面跳转，是单页面的页面跳转。Vue Route 比较容易上手，需要理解几个关键的概念：
- Route：单签路由，当前的URL
- Router：Vue Router 实例，在main.ts 中的创建的那个 Router
- < RouterView />：选在组件的标签，每次跳转都会显示对应的组件，RouterView 就是定义在路由配置中的组件
- 路由配置文件：url 对应组件，参数定义等等
- 路由守卫：路由的监听器，可以在进入和离开 URL 时添加业务逻辑，例如权限检查
创建一个测试项目
npm create vue@latest通过该命令创建一个项目，根据提示选择即可。
创建路由
router/index.ts定义了路由的配置信息，根据自己的需要进行修改
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import TestView from '@/views/TestView.vue'
import TestGrid from '@/views/TestGrid.vue'
import FormView from '@/views/FormView.vue'
import SlotView from '@/views/slots/index.vue'
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'home',component: HomeView,},{path: '/test',name: 'test',component: TestView,},{path: '/testGrid',name: 'TestGrid',component: TestGrid,},{path: '/form',name: 'form',component: FormView,},{path: '/slot',name: 'slot',component: SlotView,},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (About.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import('../views/AboutView.vue'),},],
})export default router初始化路由
首先在 App.vue中添加 RouterView,
// Path: src/App.vue
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'</script><template><RouterView />
</template><style scoped>
</style>main.ts使用 router
import { createApp } from 'vue'
import { createPinia } from 'pinia'import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
import App from './App.vue'
import router from './router'
import {PieChartOutlined,MailOutlined,DesktopOutlined,InboxOutlined,AppstoreOutlined,} from '@ant-design/icons-vue';const app = createApp(App)app.use(createPinia())
app.use(router)
app.use(Antd)
app.component('PieChartOutlined', PieChartOutlined)app.mount('#app')路由匹配
通过上面几步简单的路由就可以实现了，如果需要传递参数，需要对路由配置进行修改。添加ID参数：
{path: '/testGrid/:id',name: 'TestGrid',component: TestGrid,},
template 中获取参数
<div class="top">{{ $route.params.id }}</div>
如果想在 script 中获取参数，可以 useRoute hooks
<script setup lang="ts">
import align from "dom-align";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";const route = useRoute()onMounted(()=>{console.log(route.params.id)
})</script>
路由守卫
进入路由之前添加业务逻辑
router.beforeEach((to, from) => {// ...// explicitly return false to cancel the navigationif (to.name === "form"){return {name:"home"}}})
总结
Vue 路由是管理单页面路由的组件，只要使用了 Router，整个应用的路由和渲染就由 Router 接管了，正确的渲染组件必须使用 RouterView。本文只是介绍了Router 中的几个重点的概念，如需使用更复杂的功能，可以参考 Vue Router 官网，或者使用豆包、DeepSeek 等模型进行编写。
)