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

总结

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

您可能感兴趣的文章:

Vue2 的12种组件通讯
之前文章我们描述给过Vue3 的七通信使用，今天中五篇文章我们再来看看Vue2 的通信使用写法的相关资料,需要的朋友可以参考下面文章的具体内容
2021-09-09
vue2之vue.config.js最全配置教程
本文主要介绍了vue2之vue.config.js最全配置教程,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
Vue实现固定定位图标滑动隐藏效果
移动端页面，有时候会出现一些固定定位在底部图标，比如购物车等。这篇文章主要介绍了Vue制作固定定位图标滑动隐藏效果,需要的朋友可以参考下
2019-05-05
Vue 使用beforeEach实现登录状态检查功能
今天小编就为大家分享一篇Vue 使用beforeEach实现登录状态检查功能，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
Vue3获取DOM节点的3种方式实例
Vue本来无需操作DOM来更新界面,而且Vue也不推荐我们直接操作DOM,但是我们非要拿到DOM操作DOM怎么办,下面这篇文章主要给大家介绍了关于Vue3获取DOM节点的3种方式,需要的朋友可以参考下
2023-02-02
vite+vue3+element-plus搭建项目的踩坑记录
这篇文章主要介绍了vite+vue3+element-plus搭建项目的踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
如何利用vue-cli监测webpack打包与启动时长
这篇文章主要给大家介绍了关于如何利用vue-cli监测webpack打包与启动时长的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-02-02
Vue实现下拉加载更多
这篇文章主要为大家详细介绍了Vue实现下拉加载更多，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
vue2.0结合DataTable插件实现表格动态刷新的方法详解
这篇文章主要介绍了vue2.0结合DataTable插件实现表格动态刷新的方法,结合具体项目实例形式分析了vue2.0结合DataTable插件实现表格动态刷新过程中遇到的问题与相应的解决方法,需要的朋友可以参考下
2017-03-03
vuex state中的数组变化监听实例
今天小编就为大家分享一篇vuex state中的数组变化监听实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11