vue3页面跳转方式

页面跳转方式

在 Vue 3 中，实现页面跳转主要借助 Vue Router 来完成，常见的页面跳转方式分为声明式导航和编程式导航，以下为你详细介绍：

1. 前置准备：安装和配置 Vue Router

在使用页面跳转功能前，需要先安装并配置 Vue Router。假设你使用的是 Vite 创建的 Vue 3 项目，可按如下步骤操作：

安装 Vue Router

npm install vue-router@4

配置路由

在 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: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

在主应用中使用路由

在 src/main.js 文件中引入并使用路由实例：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

2. 声明式导航

声明式导航是指使用 组件来创建导航链接，它会渲染成一个 标签，点击该链接即可实现页面跳转。

基本用法

<template>
  <div>
    <!-- 跳转到 Home 页面 -->
    <router-link to="/">Home</router-link>
    <!-- 跳转到 About 页面 -->
    <router-link to="/about">About</router-link>
  </div>
</template>

<script setup>
// 无需额外的脚本代码
</script>

携带参数跳转

可以通过 to 属性传递参数，分为路径参数和查询参数两种方式。

路径参数

<template>
  <div>
    <!-- 携带 id 参数跳转到 User 页面 -->
    <router-link :to="`/user/${userId}`">User</router-link>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const userId = ref(1);
</script>

在路由配置中需要定义路径参数：

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('../views/User.vue')
  }
];

查询参数

<template>
  <div>
    <!-- 携带 keyword 参数跳转到 Search 页面 -->
    <router-link :to="{ path:'/search',query: { keyword: 'Vue3' } }">Search</router-link>
  </div>
</template>

<script setup>
// 无需额外的脚本代码
</script>

3. 编程式导航

编程式导航是指在 JavaScript 代码中通过调用路由实例的方法来实现页面跳转，常用的方法有 router.push 和 router.replace。

引入路由实例

在组件中使用 useRouter 钩子获取路由实例：

<template>
  <div>
    <button @click="goToAbout">Go to About</button>
    <button @click="replaceToAbout">Replace to About</button>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

router.push

router.push 方法会向历史记录中添加一个新的记录，点击浏览器的后退按钮可以回到上一个页面。

const goToAbout = () => {
  // 跳转到 About 页面
  router.push('/about');
};

router.push 携带参数

同样可以携带路径参数和查询参数。

路径参数

const userId = 1;
router.push(`/user/${userId}`);

查询参数

router.push({
  path: '/search',
  query: {
    keyword: 'Vue 3'
  }
});

router.replace

router.replace 方法会替换当前的历史记录，点击浏览器的后退按钮不会回到当前页面。

const replaceToAbout = () => {
  // 替换当前页面为 About 页面
  router.replace('/about');
};

4. 命名路由跳转

除了使用路径进行跳转，还可以使用路由的名称进行跳转，这样可以避免硬编码路径，提高代码的可维护性。

声明式导航

<template>
  <div>
    <!-- 使用命名路由跳转到 Home 页面 -->
    <router-link :to="{ name: 'Home' }">Home</router-link>
    <!-- 使用命名路由跳转到 About 页面 -->
    <router-link :to="{ name: 'About' }">About</router-link>
  </div>
</template>

<script setup>
// 无需额外的脚本代码
</script>

编程式导航

const goToHome = () => {
  // 使用命名路由跳转到 Home 页面
  router.push({ name: 'Home' });
};

const goToAbout = () => {
  // 使用命名路由跳转到 About 页面
  router.push({ name: 'About' });
};

通过以上几种方式，你可以在 Vue 3 项目中灵活地实现页面跳转功能。