vue.js实现跳转
Vue.js 实现页面跳转的方法
在 Vue.js 中，可以通过多种方式实现页面跳转，具体取决于项目是否使用 Vue Router 以及跳转的场景需求。以下是常见的实现方法：
使用 Vue Router 的编程式导航
对于配置了 Vue Router 的项目，可以通过 this.$router.push 方法实现跳转：
// 跳转到指定路径
this.$router.push('/target-path')
// 带参数的跳转
this.$router.push({ path: '/user', query: { id: '123' } })
// 命名路由跳转
this.$router.push({ name: 'user', params: { userId: '123' } })使用 replace 方法不会留下历史记录：
this.$router.replace('/login')声明式导航（模板中使用）
在模板中可以直接使用 <router-link> 组件：
<router-link to="/about">关于页面</router-link>
<router-link :to="{ name: 'user', params: { userId: 123 }}">用户</router-link>路由重定向
在路由配置中设置重定向：
const routes = [
{ path: '/home', redirect: '/' },
{ path: '/old', redirect: { name: 'new' } }
]导航守卫控制跳转
可以在全局或路由独享的守卫中控制跳转：
router.beforeEach((to, from, next) => {
if (需要重定向的条件) {
next('/login')
} else {
next()
}
})新窗口打开链接
对于需要在新窗口打开的链接：
let routeData = this.$router.resolve({
path: '/target',
query: { id: 123 }
})
window.open(routeData.href, '_blank')原生 JavaScript 跳转
在不使用 Vue Router 的简单场景中：
// 普通跳转
window.location.href = 'http://example.com'
// 替换当前页面
window.location.replace('http://example.com')根据项目需求和场景选择合适的方法，Vue Router 提供了最完整的路由解决方案，适合单页应用开发。对于简单的多页应用，也可以直接使用原生跳转方式。
