当前位置：首页 > VUE

vue实现网页跳转

2026-02-19 09:22:05VUE

路由跳转（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或编程式导航：

<!-- 模板中使用router-link -->
<router-link to="/about">跳转到About页</router-link>

<!-- 编程式导航 -->
<button @click="goToAbout">跳转</button>

methods: {
  goToAbout() {
    this.$router.push('/about')
  }
}

动态路由跳转

需要传递参数时，可以使用动态路由：

// 路由配置
{ path: '/user/:id', component: User }

// 跳转时传递参数
this.$router.push('/user/123')

在目标组件中获取参数：

this.$route.params.id

命名路由跳转

给路由配置名称可以更方便地进行跳转：

// 路由配置
{ path: '/user/:id', name: 'user', component: User }

// 使用名称跳转
this.$router.push({ name: 'user', params: { id: 123 } })

替换当前路由

不希望保留历史记录时，可以使用replace方法：

this.$router.replace('/about')

重定向跳转

在路由配置中设置重定向：

{ path: '/old-path', redirect: '/new-path' }

外部链接跳转

跳转到非Vue路由的外部链接：

<a href="https://example.com" target="_blank">外部链接</a>

或者在方法中实现：

window.location.href = 'https://example.com'

导航守卫控制跳转

可以在跳转前后添加逻辑控制：

vue实现网页跳转

router.beforeEach((to, from, next) => {
  // 例如检查用户权限
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})