vue跳转页面怎么跳转

百变鹏仔 3个月前 (09-25) #VUE

文章标签跳转

vue.js 页面跳转有两种方式：路由跳转，适合复杂页面导航，使用 vue-router 管理，需要安装、创建路由表，并通过 router.push() 进行跳转。手动跳转，适合简单页面导航，可使用 window.location.assign()、this.$router.go() 或 window.open()，无需使用 vue-router，但要注意不会触发 vue 路由钩子。

Vue 页面跳转详解

Vue.js 中页面跳转有两种主要方式：

一、路由跳转

路由跳转是一种更优雅、更灵活的跳转方式，适用于需要管理复杂页面导航的单页面应用程序 (SPA)。

立即学习“前端免费学习笔记（深入）”；

安装 vue-router

npm install vue-router

创建路由表

import Vue from 'vue'import VueRouter from 'vue-router'import Home from './components/Home.vue'import About from './components/About.vue'Vue.use(VueRouter)const routes = [  { path: '/', component: Home },  { path: '/about', component: About }]const router = new VueRouter({  routes})

使用路由跳转

<template><button>Go to About</button></template><script>import { useRouter } from 'vue-router'export default {  setup() {    const router = useRouter()    const goToAbout = () => {      router.push('/about')    }    return {      goToAbout    }  }}</script>

二、手动跳转

手动跳转适合简单页面导航或特殊情况。

使用 window.location.assign()

window.location.assign('https://example.com')

使用 this.$router.go()

this.$router.go(1) // 返回this.$router.go(-1) // 前进

使用 window.open()

window.open('https://example.com', '_blank') // 在新窗口中打开

注意事项：

文章推荐

vue跳转页面怎么跳转

如何使用Vue和网易云API构建高性能的音乐搜索引擎

Vue中使用v-model的双向绑定优化应用的数据性能

Vue和Canvas：如何实现在线头像裁剪和尺寸调整工具

Vue组件通讯的实现方式有哪些？

如何使用Vue和网易云API开发一款智能化的音乐播放器