vue项目怎么写跳转

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

文章标签跳转

在 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');

文章推荐