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

总结

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

您可能感兴趣的文章:

解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
vue-quill-editor默认插入图片是直接将图片转为base64再放入内容中，如果图片较多，篇幅太长，就会比较烦恼，接下来通过本文给大家介绍vue-quill-editor上传内容由于图片是base64的导致字符太长的问题及解决方法,需要的朋友可以参考下
2018-08-08
Electron实现静默打印小票的流程详解
很多情况下程序中使用的打印都是用户无感知的,并且想要灵活的控制打印内容,往往需要借助打印机给我们提供的api再进行开发,这种开发方式非常繁琐,并且开发难度较大,本文给大家介绍了Electron实现静默打印小票的流程,感兴趣的朋友可以参考下
2024-06-06
VUE3中的函数的声明和使用
这篇文章主要介绍了VUE3中的函数的声明和使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue3如何按需加载第三方组件库详解
距离 Vue 3.0 正式版发布已经有一段时间了,关于vue3组件库相关的问题还是挺多人感兴趣的,这篇文章主要给大家介绍了关于vue3如何按需加载第三方组件库的相关资料,需要的朋友可以参考下
2021-06-06
vue中keep-alive，include的缓存问题
这篇文章主要介绍了vue中keep-alive，include的缓存问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
为什么推荐使用JSX开发Vue3
这篇文章主要介绍了为什么推荐使用JSX开发Vue3，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-12-12
vue3中轻松实现switch功能组件的全过程
这篇文章主要给大家介绍了关于vue3中轻松实现switch功能组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
vue3组合式API中setup()概念和reactive()函数的用法
这篇文章主要介绍了vue3组合式API中setup()概念和reactive()函数的用法,接下来的事件，我将带着你从浅到深分析为什么我们需要学习组合式API以及我们的setup()函数作为入口函数的一个基本的使用方式，需要的朋友可以参考下
2023-03-03
Vue插槽slot全部使用方法示例解析
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签，这篇文章主要介绍了Vue插槽的理解和使用,需要的朋友可以参考下
2023-03-03
基于Vue实现支持按周切换的日历
这篇文章主要为大家详细介绍了基于Vue实现支持按周切换的日历，根据实际开发情况按每年、每月、每周进行切换，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08