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 中实现单页面跳转的主要技术点，可以根据具体需求选择合适的方式。