Vue实现页面跳转方式及传参方式

更新时间：2024年03月19日 10:19:00 作者：sunfan0

这篇文章主要介绍了Vue实现页面跳转方式及传参方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

路由配置

//路由配置  routerindex.js页面

import Vue from 'vue'
import Router from 'vue-router'
import UserManager from '@/components/UserManager'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/userManager',
      name: 'userManager',
      component: UserManager
    }
  ]
})

1.标签跳转

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

跳转时传参

//路由配置
 path: '/userManager/:id',  
 
 //跳转页面   this.id 需要传的参数
<router-link :to="'/userManager/' + this.id"> <router-link/>


//接收参数
this.$route.params.id

2.事件跳转

methods: {
  goUserManager() {
    this.$router.push({ path:'/userManager'})
  }
}

query传参

相当于get请求，页面跳转时参数会在地址栏中显示

//跳转页面 
this.$router.push({ 
    path:'/userManager',
    query: {
        id:this.id
    }
})

//接收参数
this.$route.query.id

params传参

相当于post请求，页面跳转时参数不会在地址栏中显示

//跳转页面 
this.$router.push({ 
    path:'/userManager',
    name:'userManager', 
    //params传参 需要使用 name 否则取不到；对应路由配置的 name
    params: {
        id:this.id
    }
})

//接收参数
this.$route.params.id

使用params传参时刷新页面参数消失

配置路由在path加 /:id 对应需要传的参数名

//路由配置
 path: '/userManager/:id',

注意：

传参是router
接收参数是route

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

如何给element plus中动态form-item增加校验的可行方法
文章主要介绍了ElementPlus中动态生成el-form-item时如何使用内置校验机制,通过设置prop属性和使用行内定义规则,结合v-model绑定响应式数据,实现动态表单项的校验,还提到可以定义规则函数优化代码,并在提交时统一提示校验未通过的错误
2026-04-04
vue $set 给数据赋值的实例
今天小编就为大家分享一篇vue $set 给数据赋值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
VUE对Storage的过期时间设置,及增删改查方式
这篇文章主要介绍了VUE对Storage的过期时间设置,及增删改查方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-02-02
一篇Vue、React重点详解大全
这篇文章主要介绍了一篇Vue、React重点详解大全，文章内容详细，通过案例可以更好的理解其相关知识，需要的朋友可以参考下
2023-01-01
基于vue实现一个神奇的动态按钮效果
今天我们将利用vue的条件指令来完成一个简易的动态变色功能按钮,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
2019-05-05
Vue首屏加载过慢出现长时间白屏的实现
本文主要介绍了Vue首屏加载过慢出现长时间白屏的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
vue与bootstrap实现时间选择器的示例代码
本篇文章主要介绍了vue与bootstrap实现时间选择器的示例代码，非常具有实用价值，需要的朋友可以参考下
2017-08-08
vue二次封装一个高频可复用组件的全过程
在开发Vue项目我们一般使用第三方UI组件库进行开发,但是这些组件提供的接口并不一定满足我们的需求,这时我们可以通过对组件库组件的二次封装,来满足我们特殊的需求,这篇文章主要给大家介绍了关于vue二次封装一个高频可复用组件的相关资料,需要的朋友可以参考下
2022-10-10
Vue生命周期函数调用详解
这篇文章主要介绍了Vue生命周期函数调用详解，本文将实现Vue生命周期相关代码的核心逻辑，从源码层面来理解生命周期，感兴趣的小伙伴可以参考一下
2022-08-08
uniApp h5项目如何通过命令行打包并生成指定路径及文件名称
用uni-app来写安卓端,近日需要将程序打包为H5放到web服务器上,经过一番折腾,这里给大家分享下,这篇文章主要给大家介绍了关于uniApp h5项目如何通过命令行打包并生成指定路径及文件名称的相关资料,需要的朋友可以参考下
2024-02-02