vue3页面跳转的多种方式

在Vue 3中，有多种方式可以实现页面跳转。以下是一些常见的方式和相应的代码示例：

1. 使用路由导航（Vue Router）进行页面跳转：

// 在路由配置文件中定义路由

import { createRouter, createWebHistory } from 'vue-router';

const routes = [

 { path: '/', component: Home },

 { path: '/about', component: About },

 // ...

];

const router = createRouter({

 history: createWebHistory(),

 routes,

});

// 在组件中使用路由导航

<template>

 <button @click="goToAbout">Go to About</button>

</template>

<script>

import { useRouter } from 'vue-router';

export default {

 methods: {

   goToAbout() {

     const router = useRouter();

     router.push('/about');

   },

 },

};

</script>

2. 使用“<router-link>“组件进行页面跳转：

<template>

 <router-link to="/about">Go to About</router-link>

</template>

3. 使用“window.location“进行页面跳转：

<template>

 <button @click="goToAbout">Go to About</button>

</template>

<script>

export default {

 methods: {

   goToAbout() {

     window.location.href = '/about';

   },

 },

};

</script>

4. 使用“<a>“标签进行页面跳转：

<template>

 <a href="/about">Go to About</a>

</template>

这些是一些常见的页面跳转方式，你可以根据具体的需求选择适合的方式来实现页面跳转。

小二CMS介绍

我们立足合肥，业务覆盖安徽、全国及全球市场。我们凭借一支经验丰富、富有创意、协作无间的专业技术团队，专注于将前沿技术通过高效简捷的途径呈现给客户，量身打造优质解决方案。我们致力于通过持续努力，成为客户在信息化领域值得托付、共创价值的长期战略合作伙伴，协助客户在新经济时代敏锐捕捉商机，拓展发展空间，构筑强大竞争力。小二CMS专注企业数字化转型的智能建站与营销系统，提供从官网搭建、品牌推广到运营增长的一站式服务，助力中小企业低门槛拥有专业级互联网阵地。

网站建设 移动相关开发 营销推广与优化 域名主机邮箱 产品与技术 企业服务

了解全部业务

扫码咨询 · 关注微信