Vue中路由传参的实用方式分享

更新时间：2023年06月08日 08:35:14 作者：蜗牛也要往上爬

这篇文章主要为大家详细介绍了VUE项目中路由之间的传值方式，文中的示例代码讲解详细，涉及到的方法也都是开发时常用的，希望对大家有多帮助

1. 方式一：使用router-link标签

1.1 params 传参

首先定义好路由

const routes = [
    { path :  ‘/home' , component : () => import(‘/../views/home.vue') } ,
    { path :  ‘/about/:id' , name : 'about' , component: () => import(‘/../views/about.vue') } 
]

在需要跳转的home组件中使用 router-link 标签

<router-link :to=”{ name : 'about' , params : { id : 1} }”>跳转</router-link>

在跳转到的about组件中拿到传过来的值

this.$route.params.id

小结：params传参类似post，路由配置可以为 path : '/about/ : id’或 path : '/about : id’。

注意：如果不配置path的路由地址 :id ，那么第一次发起请求时可以拿到传过来的值，但是刷新之后id会消失；配置了path后刷新页面id会保留。

1.2 query传参

首先定义好路由

const routes = [
    { path :  ‘/home' , component : () => import(‘/../views/home.vue') } ,
    { path :  ‘/about' , name : 'about' , component: () => import(‘/../views/about.vue') } 
]

在需要跳转的home组件中使用 router-link 标签

<router-link :to=”{ name : 'about' , query: { id : 1} }”>跳转</router-link>

在跳转到的about组件中拿到传过来的值

this.$route.query.id

小结：query传参类似于get，在url末尾会显示传过来的参数，路由地址可不配置。

注意：如果是html取参，用$route.query.id；如果是script取参，用this.$route.query.id。

总结：如果使用params传参，要在path中配置好路由地址，不然页面刷新后传过来的参数会丢失；如果使用query传参，则无需再path中配置路由地址，页面跳转后刷新也不会丢失参数。

2. 方式二：使用button按钮和点击时间@click

2.1 params 传参

首先定义好路由

const routes = [
    { path :  ‘/home' , component : () => import(‘/../views/home.vue') } ,
    { path :  ‘/about/:id' , name : 'about' , component: () => import(‘/../views/about.vue') } 
]

在需要跳转的home组件中添加一个button按钮，并增加点击事件

<button @click=”change”>跳转</button>

在change方法中使用this.$router.push进行页面跳转

change(){
    this.$router.push({
        name : “about” , 
        params : {id : 1}
    })
}

在about组件中拿到传过来的值

this.$route.params.id

小结：和使用router-link标签类似，使用params就类似于post方法，需要配置好路由地址:id，才不会在刷新页面后丢失数据。

2.2 query传参

首先定义好路由

const routes = [
    { path :  ‘/home' , component : () => import(‘/../views/home.vue') } ,
    { path :  ‘/about' , name : 'about' , component: () => import(‘/../views/about.vue') } 
]

在需要跳转的home组件中添加一个button按钮，并增加点击事件

<button @click=”change”>跳转</button>

在change方法中使用this.$router.push进行页面跳转

change(){
    this.$router.push({
        name : “about” , 
        query: {id : 1}
    })
}

或者：

change(){
    this.$router.push({
        path: “/about” , 
        query: {id : 1}
    })
}

在about组件中拿到传过来的值

this.$route.query.id

小结：和使用router-link标签类似，使用query就类似于get方法，不需要配置好路由地址:id，刷新页面后数据也不会丢失。

到此这篇关于Vue中路由传参的实用方式分享的文章就介绍到这了,更多相关Vue路由传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

在Vue中使用防抖与节流,及this指向的问题
这篇文章主要介绍了在Vue中使用防抖与节流,及this指向的问题,具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-01-01
VUE重点问题总结
本篇内容给大家总结了VUE的重要难点，并把代码做了详细分享，有兴趣的朋友参考学习下。
2018-03-03
Element中el-form表单举例详解
Form组件提供了表单验证的功能,只需要通过属性传入约定的验证规则,并将Form-Item的属性设置为需校验的字段名即可,下面这篇文章主要给大家介绍了关于Element中el-form表单的相关资料,需要的朋友可以参考下
2023-01-01
vue里面v-bind和Props 利用props绑定动态数据的方法
今天小编就为大家分享一篇vue里面v-bind和Props 利用props绑定动态数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
使用Vue父子组件通信实现todolist的功能示例代码
这篇文章主要给大家介绍了关于如何使用Vue父子组件通信实现todolist的功能的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-04-04
详解vue 祖先组件操作后代组件方法
最近写代码遇到一问题祖先级别的组件怎么操作孙子的儿子的组件方法，在网上搜了半天都是父子传参，父子操作，晕晕乎乎的想起了bus，接下来通过本文给大家介绍vue 祖先组件操作后代组件方法,需要的朋友可以参考下
2022-11-11
VuePress 中如何增加用户登录功能
VuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的
2019-11-11
vue3 api自动导入神器推荐
在做vue3项目中时,每次使用都需要先进行引入,下面这篇文章主要给大家介绍了关于vue3 api自动导入的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02
vue+moment实现倒计时效果
这篇文章主要为大家详细介绍了vue+moment实现倒计时效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-08-08
vue组件中传值EventBus的使用及注意事项说明
这篇文章主要介绍了vue组件中传值EventBus的使用及注意事项说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11