在 vue 项目中实现页面跳转，可以使用 router 模块：配置 router 模块；定义路由；使用 router-link 组件；使用 $router 对象跳页；传递参数；使用 replace 方法。

Vue 项目中实现页面跳转

在 Vue 项目中，页面跳转可以使用 router 模块实现。

1. 配置 Router

在 main.js 文件中，配置 router 模块：

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

import VueRouter from 'vue-router';
import Vue from 'vue';

Vue.use(VueRouter);

const router = new VueRouter({
  // 路由配置
});

2. 定义路由

在 routes.js 文件中，定义应用程序的路由：

export default [
  {
    path: '/',
    component: Home,
  },
  {
    path: '/about',
    component: About,
  },
];

3. 使用 Router-Link 组件

在页面模板中，使用 router-link 组件实现页面跳转：

<router-link to="/">Home</router-link>

4. 使用 $router 对象

除了 router-link，还可以使用 $router 对象跳页：

// 通过名称跳转
this.$router.push({ name: 'about' });

// 通过路径跳转
this.$router.push('/about');

5. 传递参数

可以通过路由参数传递数据：

// 路由定义
{
  path: '/user/:id',
  component: User,
},

// 跳转时传递参数
this.$router.push({ name: 'user', params: { id: 1 } });

// 组件中获取参数
this.$route.params.id;

6. 使用 replace 方法

replace 方法将新页面替换当前页面，不会添加历史记录：

this.$router.replace('/new-page');

以上就是vue项目怎么写跳转的详细内容，更多请关注php中文网其它相关文章！