vue路由跳转传递参数的方式总结

日常业务中，路由跳转的同时传递参数是比较常见的，传参的方式有三种：

1）通过动态路由方式

//路由配置文件中 配置动态路由
{
   path: '/detail/:id',
   name: 'Detail',
   component: Detail
  }
//跳转时页面
var id = 1;
this.$router.push('/detail/' + id)

//跳转后页面获取参数
this.$route.params.id

2）通过query属性传值

//路由配置文件中
{
   path: '/detail',
   name: 'Detail',
   component: Detail
  }
//跳转时页面
this.$router.push({
 path: '/detail',
 query: {
  name: '张三'，
  id: 1,
 }
})

//跳转后页面获取参数对象
this.$route.query

3）通过params属性传值

//路由配置文件中
{
   path: '/detail',
   name: 'Detail',
   component: Detail
  }
//跳转时页面
this.$router.push({
 name: 'Detail',
 params: {
  name: '张三'，
  id: 1,
 }
})

//跳转后页面获取参数对象
this.$route.params

总结：

1.动态路由和query属性传值 页面刷新参数不会丢失， params会丢失

2.动态路由一般用来传一个参数时居多(如详情页的id), query、params可以传递一个也可以传递多个参数 。

补充方法：

页面刷新数据不会丢失

methods：{
 insurance(id) {
    //直接调用$router.push 实现携带参数的跳转
    this.$router.push({
     path: `/particulars/${id}`,
    })
}

需要对应路由配置如下：

this.$route.params.id

到此这篇关于vue路由跳转传递参数的方式总结的文章就介绍到这了,更多相关vue路由跳转传递参数的三种方式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue 实现在函数中触发路由跳转的示例

    如下所示: <span @click="clickFn">点我</span> methods:{ clickFn:function(){ this.$router.go('/login');//其中login是你定义的一个路由模块 } 以上这篇vue 实现在函数中触发路由跳转的示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 详解vue 路由跳转四种方式 (带参数)

    1.  router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para

  • 解决vue单页路由跳转后scrollTop的问题

    作为vue的初级使用者,在开发过程中遇到的坑太多了.在看页面的时候发现了页面滚动的问题,当一个页面滚动了,点击页面上的路由调到下一个页面时,跳转后的页面也是滚动的,滚动条并不是在页面的顶部. 最开始我使用了一个很笨的方法,每个页面上都加上window.scrollTop(0,0);来解决问题,但是这个太繁琐了.最后和小伙伴们商量了一下,在main.js页面上加了这么一段代码 router.afterEach(function (to) { window.scrollTo(0, 0) }) 路由跳

  • vue 实现路由跳转时更改页面title

    一.router文件夹下的index文件中给每个path添加meta:{}: export default new Router({ routes: [ { path: '/', name: 'index', component: index, meta: { title: 'title1' } }, { path: '/studentInfo', name: 'studentInfo', component: studentInfo, meta: { title: 'title2' } } ]

  • Vue.js中该如何自己维护路由跳转记录

    前言 在Vue的项目中,如果我们想要做返回.回退操作时,一般会调用router.go(n)这个api,但是实际操作中,使用这个api有风险,就是会让用户跳出当前应用,因为它记录的是浏览器的访问记录,而不是你当前应用的访问记录,这是非常可怕的事情. 解决方案就是,我们自己来维护一份history跳转记录. 案例与使用场景 代码地址:https://github.com/dora-zc/mini-vue-mall (本地下载) 这是一个基于Vue.js的小型商城案例,应用场景: 自己实现一个Vue插

  • vue子路由跳转实现tab选项卡

    vue子路由跳转实现tab选项卡

    现在很多的后台管理系统都采用tab选项卡的布局,左边是导航栏固定,右边是对应的页面,每次点击左边的导航标题,只有右面的对应页面再切换,而vue要做tab选项卡,推荐使用<router-link></router-link>实现a标签的效果,然后使用<router-view></router-view>实现插槽的效果,把对应的页面 "塞" 进去,具体实现看下面的案例: 1.这是tab选项卡的页面,布局就不说了,主要是<router-l

  • vue路由跳转传递参数的方式总结

    日常业务中,路由跳转的同时传递参数是比较常见的,传参的方式有三种: 1)通过动态路由方式 //路由配置文件中 配置动态路由 { path: '/detail/:id', name: 'Detail', component: Detail } //跳转时页面 var id = 1; this.$router.push('/detail/' + id) //跳转后页面获取参数 this.$route.params.id 2)通过query属性传值 //路由配置文件中 { path: '/detail

  • Vue页面跳转传递参数及接收方式

    最近接触了vue项目,这里记录一下vue跳转到下一页面携带参数的两种方式. 典型应用场景:列表页跳转到详情页 一.配置路由 文件路径:src/router/config.php import Vue from 'vue' import Router from 'vue-router' import classify from '.././components/classify/classify.vue' import classifyChild from '.././components/cla

  • vue路由跳转传参数的方法

    vue中路由跳转传参数有多种,自己常用的是下面的几种 通过router-link进行跳转 通过编程导航进行路由跳转 1. router-link <router-link :to="{ path: 'yourPath', params: { name: 'name', dataObj: data }, query: { name: 'name', dataObj: data } }"> </router-link> 1. path -> 是要跳转的路由路径

  • Vue路由跳转的4种方式小结

    目录 1. 标签路由 router-link 2.编程式路由 this.$router.push() 3.this.$router.replace()(与this.$router.push()类似) 4.this.$router.go(n) 5.this.$router.push().this.$router.replace().this.$router.go(n)区别 router-view 实现路由内容的地方,引入组件时写到需要引入的地方,需要注意的是,使用vue-router控制路由则必须

  • Vue路由跳转方式区别汇总（push，replace，go）

    目录 声明式导航router-link 1. 不带参数 2.带参数 编程式导航 1.this.$router.push 2.this.$router.replace 3.this.$router.go(n) 总结区别: 在浏览器中,点击链接实现导航的方式,叫做声明式导航.例如:普通网页中点击 a标签链接.vue项目中点击router-link标签链接都属于声明式导航.在浏览器中,调用API方法实现导航的方式,叫做编程式导航.例如:普通网页中调用location.href跳转到新页面的方式,属于编

  • vue路由跳转router-link清除历史记录的三种方式(总结)

    目录 路由跳转router-link清除历史记录 官方文档提供了如下三种方式 vue跳转后不记录历史记录 路由跳转router-link清除历史记录 1.在vue项目中说起路由跳转,我们最先想到的就是router-link标签以及this.$router.push函数. router-link和this.\$router.push的实现原理是一样的,在点击router-link时,内部调用的就是this.$router.push. 2.this.\$router.push这个方法会向 histo

  • vue路由传参的基本实现方式小结【三种方式】

    本文实例讲述了vue路由传参的基本实现方式.分享给大家供大家参考,具体如下: 前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转.传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示参数两种方式,这就是vue路由传参的三种方式. 方式一:params 传参(显示参数) params 传参(显示参数)又可分为 声明式 和 编程式 两种方式 1.声明式 router-link 该方式是通过 router-

  • vue路由传参三种基本方式详解

    这篇文章主要介绍了vue路由传参三种基本方式详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> methods: 方案一: getDescribe(id) { // 直接调用$r

  • Vue3使用vue-router如何实现路由跳转与参数获取

    目录 vue-router实现路由跳转与参数获取 路由跳转和传参 路由跳转三种方法的总结 一.第一种 二.第二种 三.第三种 vue-router实现路由跳转与参数获取 路由跳转和传参 import { defineComponent, onMounted, reactive, readonly, ref } from 'vue'; import { useRouter, useRoute } from 'vue-router'; export default defineComponent({

随机推荐