vue实现单页面跳转
Vue 实现单页面跳转的方法
在 Vue 中实现单页面跳转（SPA）通常使用 Vue Router，以下是几种常见的方法：
使用 router-link 组件
Vue Router 提供了 router-link 组件用于声明式导航，可以生成带有正确 href 属性的 <a> 标签。
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>编程式导航
通过 this.$router.push 或 router.push 方法实现跳转。
// 字符串路径
this.$router.push('/home')
// 对象形式
this.$router.push({ path: '/home' })
// 命名路由
this.$router.push({ name: 'Home' })
// 带查询参数
this.$router.push({ path: '/home', query: { id: '123' } })
// 带哈希
this.$router.push({ path: '/home', hash: '#section' })替换当前路由
使用 replace 方法不会向 history 添加新记录。
this.$router.replace('/home')前进后退
在 history 记录中前进或后退。
// 前进
this.$router.go(1)
// 后退
this.$router.go(-1)动态路由匹配
可以通过冒号 : 标记动态路径参数。
const routes = [
{ path: '/user/:id', component: User }
]访问 /user/123 时，params.id 为 123。
导航守卫
可以在路由跳转前后添加逻辑控制。
router.beforeEach((to, from, next) => {
// 必须调用 next()
})路由懒加载
通过动态导入实现组件懒加载，优化性能。
const User = () => import('./views/User.vue')命名视图
可以在同一级展示多个视图组件。
<router-view name="sidebar"></router-view>
<router-view></router-view>这些方法涵盖了 Vue 中实现单页面跳转的主要技术点，可以根据具体需求选择合适的方式。
