vue3切换路由

### Vue3 中实现路由切换的方法 在 Vue3 应用程序中，通过 `vue-router` 可以方便地管理应用的导航逻辑。创建并配置好 `VueRouter` 实例之后，在根 Vue 实例中利用 `router` 选项将其与应用程序关联起来[^1]。 对于页面之间的跳转操作，可以采用编程方式或者声明式的链接形式完成： #### 编程式导航 借助 `$router.push()` 方法能够实现在 JavaScript 代码内部触发页面转换的行为。下面给出一段简单的例子展示如何执行此功能： ```javascript // 假设当前位于 /home 页面 this.$router.push({ path: '/about' }) ``` #### 声明式导航 (使用 `<router-link>` 组件) 另一种更为直观的方式就是直接运用框架自带的 `<router-link>` 标签来进行超链定义，它会自动处理点击事件从而改变 URL 并更新视图内容而无需刷新整个网页。 ```html <!-- 导航菜单 --> <router-link to="/home">Home</router-link> <router-link to="/about">About Us</router-link> <!-- 路由匹配到的组件将会在这里被渲染出来 --> <router-view></router-view> ``` 当涉及到更复杂的场景比如带有参数传递或者是命名路由的时候，则可以根据实际需求调整上述两种基本模式下的具体写法来满足业务要求。 为了使用户体验更加流畅自然，还可以考虑加入过渡动画效果给每次路由变化过程增添一些视觉反馈。这可以通过设置 CSS 过渡类名配合 vue 的内置 `<transition>` 或者 `<keep-alive>` 组件轻松达成目的[^5]。 另外值得注意的是如果项目规模较大可能会存在多个模块各自维护独立的一套子路径结构；这时就需要引入懒加载机制以及动态导入技术优化初始加载性能的同时保持良好的可扩展性[^4]。 最后附上一份简易版完整的单页应用(SPA)模板供参考学习之用： ```typescript import { createApp } from 'vue' import App from './App.vue' // 创建路由器实例 const router = createRouter({ history: createWebHistory(), routes:[ { path:'/', name:'Layout', component:()=>import('./views/Layout/index.vue') }, // 更多路由... ] }) createApp(App).use(router).mount('#app') ```