vue 实现页面跳转
Vue 实现页面跳转的方法
在 Vue 中实现页面跳转可以通过多种方式，主要包括使用 Vue Router 提供的导航方法和原生 JavaScript 的方式。
使用 Vue Router 的 router-link 组件
router-link 是 Vue Router 提供的组件，用于声明式导航。它会渲染成一个 <a> 标签，点击后跳转到指定的路由。
<router-link to="/home">跳转到首页</router-link>可以通过 :to 绑定动态路径或命名路由：
<router-link :to="{ path: '/user', query: { id: 123 } }">跳转到用户页</router-link>
<router-link :to="{ name: 'user', params: { id: 123 } }">跳转到用户页</router-link>使用 Vue Router 的编程式导航
在 Vue 组件中，可以通过 this.$router 访问路由实例，调用其方法实现编程式导航。
跳转到指定路径：
this.$router.push('/home')跳转到命名路由并传递参数：
this.$router.push({ name: 'user', params: { id: 123 } })跳转并传递查询参数：
this.$router.push({ path: '/user', query: { id: 123 } })替换当前路由（不保留历史记录）：
this.$router.replace('/home')返回上一页：
this.$router.go(-1)使用原生 JavaScript 实现跳转
在某些情况下，可能需要使用原生 JavaScript 实现页面跳转。
使用 window.location.href：
window.location.href = '/home'使用 window.location.replace（不保留历史记录）：
window.location.replace('/home')在新标签页中打开链接
使用 router-link 时，可以通过 target="_blank" 在新标签页中打开链接：
<router-link to="/home" target="_blank">在新标签页中打开首页</router-link>使用编程式导航时，可以通过 window.open 实现：
window.open('/home', '_blank')动态路由跳转
动态路由允许根据参数跳转到不同的页面。例如，定义路由：
const routes = [
{ path: '/user/:id', component: User }
]跳转到动态路由：
this.$router.push('/user/123')在目标组件中，可以通过 this.$route.params.id 获取参数。
路由重定向
在路由配置中定义重定向：
const routes = [
{ path: '/old', redirect: '/new' }
]通过编程方式实现重定向：
this.$router.push('/new')导航守卫
在跳转前可以通过导航守卫进行权限控制或数据预加载。
全局前置守卫：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})组件内守卫：
beforeRouteEnter(to, from, next) {
next(vm => {
// 访问组件实例 `vm`
})
}路由懒加载
对于大型应用，可以使用路由懒加载优化性能：
const User = () => import('./views/User.vue')
const routes = [
{ path: '/user', component: User }
]通过以上方法，可以在 Vue 中灵活实现页面跳转，满足不同场景的需求。
