vue 实现页面跳转
路由跳转（Vue Router）
在Vue项目中，通常使用Vue Router实现页面跳转。确保已安装并配置Vue Router：
// 安装Vue Router
npm install vue-router配置路由示例：
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router跳转方法：
-
声明式导航（模板中）
<router-link to="/about">跳转到About页</router-link> -
编程式导航（脚本中）
// 字符串路径 this.$router.push('/about')
// 对象形式 this.$router.push({ path: '/about' })
// 命名路由（需在路由配置中设置name属性） this.$router.push({ name: 'about' })
// 带查询参数 this.$router.push({ path: '/about', query: { id: 1 } })
// 替换当前路由（不留下历史记录） this.$router.replace('/about')
// 前进/后退 this.$router.go(1) // 前进一步 this.$router.go(-1) // 后退一步
---
### 动态路由匹配
路由配置中定义动态参数：
```javascript
{ path: '/user/:id', component: User }获取动态参数：
this.$route.params.id跳转到动态路由：
this.$router.push('/user/123')路由守卫
控制跳转前后的行为：
// 全局前置守卫
router.beforeEach((to, from, next) => {
// 可在此处进行权限校验等操作
next() // 必须调用next()继续导航
})
// 路由独享守卫
{
path: '/admin',
component: Admin,
beforeEnter: (to, from, next) => {
// 仅对该路由生效
next()
}
}
// 组件内守卫
export default {
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被验证前调用
next()
},
beforeRouteLeave(to, from, next) {
// 导航离开该组件的对应路由时调用
next()
}
}路由懒加载
提升应用性能，按需加载路由组件：
const routes = [
{
path: '/about',
component: () => import('../views/About.vue')
}
]命名视图
同一路由展示多个视图：
// 路由配置
{
path: '/settings',
components: {
default: Settings,
sidebar: SettingsSidebar
}
}<!-- 模板中使用 -->
<router-view></router-view>
<router-view name="sidebar"></router-view>
