vue怎么实现点击跳转
路由跳转（Vue Router）
在Vue项目中，使用Vue Router实现页面跳转是最常见的方式。确保项目已安装并配置了Vue Router。
安装Vue Router：
npm install vue-router配置路由（通常在src/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 to="/about">跳转到About页</router-link>
<!-- 编程式导航 -->
<button @click="$router.push('/about')">跳转</button>方法跳转
在组件方法中通过this.$router实现跳转：
methods: {
goToAbout() {
this.$router.push('/about')
},
goBack() {
this.$router.go(-1)
}
}带参数跳转
传递参数并接收：
// 跳转时传递参数
this.$router.push({
path: '/user',
query: { id: 123 }
})
// 或使用params
this.$router.push({
name: 'user',
params: { id: 123 }
})接收参数：
// 接收query参数
this.$route.query.id
// 接收params参数
this.$route.params.id命名路由跳转
在路由配置中定义name属性：
{
path: '/user/:id',
name: 'user',
component: User
}通过name跳转：
this.$router.push({ name: 'user', params: { id: 123 } })新窗口打开
使用router.resolve实现新窗口打开：
const route = this.$router.resolve({
path: '/about'
})
window.open(route.href, '_blank')路由守卫
全局前置守卫控制跳转：
router.beforeEach((to, from, next) => {
// 跳转前逻辑
next()
})
