vue点击跳转实现
路由跳转实现
在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 to="/about">关于我们</router-link>带参数的跳转：
<router-link :to="{ name: 'user', params: { userId: 123 }}">用户</router-link>编程式导航
在方法中使用this.$router.push实现跳转：
methods: {
goToAbout() {
this.$router.push('/about')
}
}带查询参数的跳转：
this.$router.push({ path: '/user', query: { id: '123' } })命名路由跳转
路由配置中添加name属性：
{ path: '/user/:id', name: 'user', component: User }使用name跳转：
this.$router.push({ name: 'user', params: { id: 123 } })路由传参
通过params传参：
this.$router.push({ name: 'user', params: { userId: 123 } })通过query传参：
this.$router.push({ path: '/user', query: { userId: 123 } })路由跳转钩子
使用导航守卫控制跳转：
router.beforeEach((to, from, next) => {
// 跳转前逻辑
next()
})新窗口打开
使用router.resolve实现新窗口打开：
const route = this.$router.resolve({path: '/about'})
window.open(route.href, '_blank')路由懒加载
优化性能使用懒加载：
const User = () => import('../views/User.vue')动态路由
添加动态路由：
router.addRoute({ path: '/new', component: NewComponent })以上方法涵盖了Vue中实现点击跳转的主要场景，可根据具体需求选择合适的方式。
